CSS Selectors

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

Basic Selectors

Element Selector

The element selector selects HTML elements based on the element name.

CSS
p {
  color: red;
}

ID Selector

The ID selector uses the id attribute of an HTML element to select a specific element.

CSS
#unique-element {
  color: blue;
}

Class Selector

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

CSS
.my-class {
  color: green;
}

Combinators

Descendant Selector

Selects all elements that are descendants of a specified element.

CSS
div p {
  color: purple;
}

Child Selector

Selects all elements that are the direct children of a specified element.

CSS
div > p {
  color: orange;
}

Your Task

Style the HTML content using CSS selectors:

1. Make all paragraphs blue
2. Give the heading a different color
3. Add a class to some elements and style them differently
4. Use a descendant selector to style elements inside a container