CSS Selectors Explained with Examples, Types of CSS Selectors

Selector Overview

What Are CSS Selectors ?

In CSS, selectors are used to target HTML elements so you can apply styling to them. They act as a bridge between your CSS rules and HTML content.

Types of CSS Selectors

1. Element Selector

This targets all elements of a specific type.

Syntax:

p {
  color: blue;
}

This will apply the style to all <p> tags.

2. ID Selector

Targets a specific HTML element with a unique id.

Syntax:

#header {
  background-color: orange;
}

This will apply only to the element with id = "header".

3. Class Selector

Targets one or more elements with the same class

Syntax:

.box {
  border: 1px solid gray;
  padding: 10px;
}

This applies to all elements with class = "box".

4. Universal Selector

Selects all elements on the page.

Syntax:

* {
  margin: 0;
  padding: 0;
}

Useful for resetting default styles.

5. Group Selector

Applies the same style to multiple elements, reducing repetition.

Syntax:

h1, h2, p {
  font-family: Arial, sans-serif;
}

This sets teh same font for all <h1>, <h2> and <p> tags.

Example:

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }

    h1 {
      color: darkblue;
    }

    #unique {
      background-color: yellow;
    }

    .highlight {
      font-weight: bold;
      color: red;
    }

    h2, p {
      font-family: Verdana, sans-serif;
    }
  </style>
</head>

<body>
  <h1>Welcome to Quipoin</h1>
  <div id="unique">This is styled using an ID selector</div>
  <p class="highlight">This is a paragraph with class styling.</p>
  <p>This is a normal paragraph.</p>
  <h2>This is a grouped heading</h2>
</body>

</html>

Output: