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 Class Example</title>
  </head>

  <body>
    <div class="card shadow">
      <img src="https://via.placeholder.com/250" alt="Card Image" />
      <h2 class="card-title">Card 1</h2>
      <p class="card-content">Basic Card</p>
    </div>

    <div class="card highlight shadow">
      <img src="https://via.placeholder.com/250" alt="Card Image" />
      <h2 class="card-title">Card 2</h2>
      <p class="card-content">Basic Card</p>
    </div>

    <div class="card highlight">
      <img src="https://via.placeholder.com/250" alt="Card Image" />
      <h2 class="card-title">Card 3</h2>
      <p class="card-content">Basic Card</p>
    </div>
  </body>
</html>

# Class

## How to Reuse Styles

A CSS `class` is an **identifier** (selector) used to apply styles to HTML elements or to select elements using JavaScript.

It is primarily used to apply the same CSS styles to multiple HTML elements.

<br />

**Key Features of a Class**

- A class is defined in CSS with a name starting with a `.` and multiple elements can share the same class name to share styles

- Multiple classes can be applied to a single HTML element

- Class names should be defined without spaces, using letters, numbers, hyphens (`-`), and underscores (`_`)

<br />

For example, the following CSS class sets the background color to yellow and the text color to blue.

```css title="Highlighted CSS Class"
.highlighted {
  background-color: yellow;
  color: blue;
}
```

<br />

This class can be applied in an HTML document to apply the same style to h1, h2, and p tags as shown below.

```html title="CSS Class Application"
<h1 class="highlighted">Highlighted H1</h1>
<h2 class="highlighted">Highlighted H2</h2>
<p class="highlighted">Highlighted Paragraph 1</p>
<p class="highlighted">Highlighted Paragraph 2</p>
```

<br />

Follow along with the highlighted parts of the code.

All cards' background color will be applied as coral.

CSS classes start with `.` and can be assigned to multiple elements to share the same styling. This allows for efficient and consistent styling.

### A CSS class is an identifier used to apply styles to an HTML element.