Gegeben ist folgender html-Code sowie css:
<p>Willkommen auf meiner Seite</p>
<p>Heute ist ein schöner Tag</p>
<p>Dieser Text ist wichtig</p>
p {
color: blue;
}
Ergebnis: Alle Absätze sind blau.
Frage:
Hier helfen id und class.
HTML:
<p id="wichtig">Dieser Text ist wichtig</p>
CSS:
#wichtig {
color: red;
font-weight: bold;
}
| Teil | Bedeutung |
|---|---|
id="wichtig" |
Name der ID |
#wichtig |
Zugriff im CSS |
HTML:
<p class="info">Willkommen auf meiner Seite</p>
<p class="info">Heute ist ein schöner Tag</p>
CSS:
.info {
color: green;
}
| Teil | Bedeutung |
|---|---|
class="info" |
Name der Klasse |
.info |
Zugriff im CSS |
Ein Element kann mehrere Klassen haben.
HTML:
<p class="info gross">Willkommen</p>
CSS:
.info {
color: green;
}
.gross {
font-size: 24px;
}
Kurze Regel:
id
class
| Merkmal | id | class |
|---|---|---|
| Verwendung | genau einmal | beliebig oft |
| CSS-Syntax | #name |
.name |
| Beispiel | id="header" |
class="button" |