#  class und id in HTML/CSS

## 1. Einstieg: Problem erzeugen

Gegeben ist folgender html-Code sowie css:

```xml
<p>Willkommen auf meiner Seite</p>
<p>Heute ist ein schöner Tag</p>
<p>Dieser Text ist wichtig</p>
```



```css
p {
    color: blue;
}
```

Ergebnis: **Alle Absätze sind blau.**

Frage:

* Was ist, wenn **nur ein Absatz** blau sein soll?
* Was ist, wenn **mehrere bestimmte Absätze** gleich aussehen sollen?

Hier helfen **id und class**.

---

# 2. Die id


* Eine **id identifiziert genau ein Element**
* Eine id **darf nur einmal pro Seite vorkommen**

HTML:

```xml
<p id="wichtig">Dieser Text ist wichtig</p>
```

CSS:

```css
#wichtig {
    color: red;
    font-weight: bold;
}
```



| Teil           | Bedeutung      |
| -------------- | -------------- |
| `id="wichtig"` | Name der ID    |
| `#wichtig`     | Zugriff im CSS |

---

# 3. Die class



* Eine **class kann für viele Elemente verwendet werden**
* Sie wird genutzt, wenn mehrere Elemente **gleich gestaltet werden sollen**

HTML:

```xml
<p class="info">Willkommen auf meiner Seite</p>
<p class="info">Heute ist ein schöner Tag</p>
```

CSS:

```css
.info {
    color: green;
}
```


| Teil           | Bedeutung       |
| -------------- | --------------- |
| `class="info"` | Name der Klasse |
| `.info`        | Zugriff im CSS  |

---

# 4. Mehrere Klassen

Ein Element kann **mehrere Klassen** haben.

HTML:

```xml
<p class="info gross">Willkommen</p>
```

CSS:

```css
.info {
    color: green;
}

.gross {
    font-size: 24px;
}
```

---

# 5. Typischer Einsatz

Kurze Regel:

**id**

* Navigation
* Header
* Footer
* einzelne spezielle Elemente

**class**

* wiederverwendbare Styles
* Buttons
* Texte
* Boxen

---

# 6. Zusammenfassung

| Merkmal    | id            | class            |
| ---------- | ------------- | ---------------- |
| Verwendung | genau einmal  | beliebig oft     |
| CSS-Syntax | `#name`       | `.name`          |
| Beispiel   | `id="header"` | `class="button"` |