Element- Klassen- und ID- Seltektoren

Element- Selektoren

Element-Selektoren in CSS wählen alle HTML-Elemente eines bestimmten Typs aus und formatieren sie einheitlich. Der Name des HTML-Tags dient dabei direkt als Selektor, zum Beispiel p für alle Absätze. Dadurch kannst du mehrere Elemente mit nur einer CSS-Regel gestalten.

Du verwendest Element-Selektoren, wenn alle Elemente eines Typs gleich aussehen sollen.

1<h1>Willkommen</h1>
2<p>Das ist ein Absatz.</p>
3<p>Noch ein Absatz.</p>

1h1 {
2    color: blue;
3}
4
5p {
6    color: green;
7    font-size: 18px;
8}

Das h1- Tag Wird blau gefärbt und alle p- Tags werden grün gefärbt und bekommen eine Schriftgröße von 16 px.

Mehrere Element-Selektoren gleichzeitig

Alle h1, h2 und h3 Überschriften bekommen Schriftart Arial und alternativ sans-serif.

1h1, h2, h3 {
2    font-family: Arial, sans-serif;
3}

Klassen- Selektoren

Klassen-Selektoren sind eine wichtige Möglichkeit in CSS, um bestimmte HTML-Elemente gezielt zu formatieren. Im Gegensatz zu Element-Selektoren, die alle Elemente eines Typs auswählen, wirken Klassen-Selektoren nur auf Elemente, denen eine bestimmte Klasse zugewiesen wurde. Dadurch kannst du einzelne oder mehrere Elemente unabhängig von ihrem HTML-Tag gleich gestalten.

1<h1 class="wichtig">Wichtige Überschrift</h1>
2<p class="wichtig">Wichtiger Text</p>
3<p>Normaler Text</p>

1.wichtig {
2    color: red;
3}

Hier färbst du Text unabhängig vom Tag rot.

ID- Selektoren

Mit ID-Selektoren in CSS formatierst du ein bestimmtes HTML-Element eindeutig. Eine ID darfst du auf einer Webseite nur einmal vergeben. Im CSS schreibst du den ID-Namen mit einer Raute (#). IDs brauchst du später in JavaScript.

1<h1 id="titel">Eine Überschrift</h1>

1#titel {
2    color: blue;
3}

Hier färbst du mit einer ID eine Überschrift blau.