CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)
• Combinators Selectors (select elements based on a specific relationship between them)
• Pseudo Class Selectors(select elements based on a certain state)
• Pseudo Element Selectors (select and style a part of an element)
• Attribute Selectors(select elements based on an attribute or attribute value)

1. The CSS Id Selector

The id of an element is unique within a page, so the id selector is used to select one unique element!

#para1 {
  text-align: center;
  color: red;
}

2. The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

.center {
  text-align: center;
  color: red;
}

3. The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

* {
  text-align: center;
  color: blue;
}

4. The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):