CSS Selectors and Properties
Hello, everyone! Welcome to the CSS Selectors and Properties lesson.
In this lesson, we will delve into CSS selectors and explore some of the most common CSS properties.
CSS Selectors
As we learned in the previous lesson, CSS selectors are used to specify the elements you want to style. There are many different types of selectors, each with its own function.
Basic Selectors
Basic selectors are the simplest and easiest to understand. They select elements based on their tag name or attribute.
Tag Selectors
Tag selectors select all elements with a specific tag name. For example, the following selector selects all h1
elements:
h1 { color: red; }
Attribute Selectors
Attribute selectors select all elements with a specific attribute. For instance, the following selector selects all elements with the class
attribute set to principal
:
.principal { color: red; }
Compound Selectors
Compound selectors combine two or more basic selectors to create a more complex selection. For example, the following selector selects all h1
elements with the class
attribute set to principal
:
h1.principal { color: red; }
Other Selectors
In addition to basic and compound selectors, there are many other types of CSS selectors. Some more advanced selectors include:
- Pseudo-classes: Select elements based on their state or behavior. For example, the following selector selects all
a
elements that are linked to an external document:
a:link { color: blue; }
- Pseudo-elements: Select specific parts of an element. For example, the following selector selects the star icon before all
li
elements:
li::before { content: "\2605"; }
CSS Properties
CSS properties are used to control the visual aspect of an element. There are many different CSS properties, each with its own function.
Basic Properties
Some of the most basic CSS properties include:
- Color: Defines the text or background color of an element.
- Font: Defines the size, type, and style of a font for an element.
- Alignment: Defines the text alignment of an element.
Advanced Properties
Some of the more advanced CSS properties include:
- Positioning: Defines the position of an element on the page.
- Layout: Defines the layout of an element or group of elements.
- Animation: Adds animation to an element.
Examples
Let’s see some examples of how to use CSS selectors and properties to style a web page.
Example 1:
The following CSS code uses a tag selector to style all h1
elements:
h1 { color: red; font-size: 20px; }
This code sets the color of all h1
elements to red and the font size to 20px.
Example 2:
The following CSS code uses an attribute selector to style all a
elements with the class
attribute set to principal
:
a.principal { color: blue; text-decoration: underline; }
This code sets the color of all a
elements with the class
attribute set to principal
to blue and adds an underline to the text.
Summary
In this lesson, we learned more about CSS selectors and explored common CSS properties.
In the next lesson, we will learn how to link CSS to HTML.
Note
Choosing the right selector for the task at hand is important. More specific selectors can make your CSS more efficient and easier to maintain.