Mastering CSS Selectors for Styling HTML Elements

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

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
Copiar código

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

css
Copiar código

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
Copiar código

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

css
Copiar código

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

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
Copiar código

In the CSS, define styles for each class separately:

css
Copiar código

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

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
Copiar código

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

css
Copiar código

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.