lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans"
      rel="stylesheet"
    />
    <title>CSS Selector Example</title>
  </head>

  <body>
    <div id="header">
      <h1>Page Title</h1>
    </div>
    <p class="highlight">This paragraph has the highlight class.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </body>
</html>

# Selectors: Targeting Elements for Styling

`CSS Selectors` allow you to select HTML elements in various ways as shown below.

<br />

**Universal Selector**: Uses the `*` symbol to select all HTML elements

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

<br />

**Element Selector**: Uses the HTML tag name to select HTML elements with that tag

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

<br />

**Class Selector**: Uses the `.class` format to select HTML elements with a specific class

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

<br />

**ID Selector**: Uses the `#id` format to select HTML elements with a specific ID

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

<br />

**Descendant Selector**: Selects elements nested within other elements

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

<br />

## HTML & CSS Example

Here's 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;
}
```

This CSS will render the following:

(The text in red) This HTML element uses the `p` tag and has the `my-class` class.
(The text with blue background) This HTML element uses the `h1` tag and has the `my-id` ID.

In the next lesson, we will explore advanced selector techniques.

The Universal Selector uses the '*' symbol to apply styles to all elements in an HTML document. For example, you can change the text color of all elements to blue.

Selectors: Targeting Elements for Styling

HTML & CSS Example

In CSS, which selector selects all HTML elements and applies styles to them?