To apply styles effectively, you need to understand CSS selectors, as they determine the HTML elements targeted for styling.

Tag selector

One way to apply styles is by using the element tag itself. Styles specified using a tag selector will affect all elements with that tag. This is useful for applying consistent styling to elements across the website.

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

html
<p>It was all in my mind</p>

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

css
9
1
2
3
p {
  property: value;
}

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

Class selector

A more precise way to style elements is by using class selectors. These selectors target elements with specific class names, allowing us to apply styles selectively.

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

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

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

css
9
1
2
3
.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.

Class composition

We can also combine multiple classes on a single element, making class composition a powerful tool for applying styles - separate class names with spaces in the class attribute.

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

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

In the CSS, define styles for each class separately:

css
9
1
2
3
4
5
6
7
.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.

ID selector

While it's possible to use the id selector for styling, it's generally not recommended. IDs should be unique on a page, limiting their reuse.

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

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

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

css
9
1
2
3
#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.