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.