lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webLightBasicChapter2Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webLightBasicChapter1Title

webLightBasicChapter3Title

# Selector: Specifying the Elements to Style

CSS selectors enable you to select HTML elements in various ways as shown below.

<br />

**Universal Selector**: Selects all HTML elements using the `*` symbol

```css title="CSS"
* {
  color: blue; /* Sets the text color of all HTML elements to blue */
}
```

<br />

**Element Selector**: Selects HTML elements based on the tag name

```css title="CSS"
p {
  font-size: 16px; /* Sets the font size of all p tags to 16px */
}
```

<br />

**Class Selector**: Selects HTML elements based on the class name using the `.class` format

```css title="CSS"
.highlight {
  background-color: yellow; /* Sets the background color of elements with the highlight class to yellow */
}
```

<br />

**ID Selector**: Selects HTML elements based on the ID using the `#id` format

```css title="CSS"
#header {
  font-weight: bold; /* Sets the font weight of the element with the header ID to bold */
}
```

<br />

**Descendant Selector**: Selects elements nested within another element

```css title="CSS"
ul li {
  list-style: circle; /* Sets the list style of li tags inside ul to a circle */
}
```

<br />

## HTML & CSS Example

Below is an example of using HTML and CSS together.

```html title="HTML"
<body>
  <p class="my-class">This HTML element uses the `p` tag and has the `my-class` class.</p>
  <h1 id="my-id">This HTML element uses the `h1` tag and has the `my-id` ID.</h1>
</body>
```

```css title="CSS"
p {
  color: red;
}

.my-class {
  background-color: blue;
}

#my-id {
  font-size: 20px;
}
```

The above CSS results in:

(Red text) This HTML element uses the `p` tag and has the `my-class` class.
(Blue background) This HTML element uses the `h1` tag and has the `my-id` ID.

In the next lesson, we will explore more advanced selector configurations.