To apply styles effectively, you need to understand CSS selectors, which determine the HTML elements to target for styling. Let's explore the main types of selectors.

Tag Selector

A tag selector targets all elements of a given tag, applying consistent styling across the page.

Syntax: In the HTML, we have a p element:

<p>It was all in my head.</p>

To apply styles in the CSS file, use the tag name (p) as the selector:

p {
  property: value;
}

Let's run the following example and check how it works.

Class Selector

Class selectors target elements that share a class name, giving you more precise control.

Syntax: In the HTML, add a class attribute with a meaningful class name:

<p class="text">This song is another hit.</p>

In the CSS, reference the class name with a period (.) to define the styles:

.text {
  property: value;
}

Let's run the following example and observe that only elements with the text class will receive these styles, giving you finer control over your styling.

All elements with the class="text" attribute are styled with red text, a font size of 24px, and a wheat-colored background. The class name text is defined in index.css using a . prefix.

Class Composition

You can assign multiple classes to a single element for flexible styling.

Syntax: In the HTML, add multiple class names to an element:

<p class="text font">A robot created chemicals.</p>

In the CSS, define styles for each class separately:

.text {
  property: value;
}

.font {
  property: value;
}

Let's run the following example and see how it works. Elements with both the text and font classes will receive the specified styles.

The <p> element with both text and font classes receives styles from both selectors. The text class sets the color to navy, and the font class sets the font size to 24px.

Id Selector

Id selectors target a single unique element. Since Ids must be unique, this method is rarely used for styling.

Syntax: In the HTML, add an id attribute to an element:

<p id="title">Choose from different themes.</p>

In the CSS, reference the id with a hashtag (#) to define the styles:

#title {
  property: value;
}

Let's run the following example and observe how it works. This example applies styles to the unique element with the title id.

The id="title" attribute uniquely identifies the <p> element, and the styles defined with the #title selector apply only to that specific element.