HTML trifft auf CSS

Selektoren

HTML und CSS werden durch Selektoren verbunden. Es gibt verschiedene Selektoren, die zu unterschiedlichen Momenten oder Kombinationen die Gestaltung beeinflussen.

HTML-Element

Das HTML-Element selbst ist der dominanteste Selektor, da es der «Parent» der Selektoren ist. HTML-Elemente sind klar definiert.

Class (HTML-Attribute)

Klassen bringen mehr Logik & Verständnis in die Struktur. Meistens werden Klassen für die Gestaltung genommen. Klassen können frei benannt werden. Im CSS durch einen Punkt (.class) vornedran spezifiziert.

ID (HTML-Attribute)

Eine ID wird benutzt, um ein einziges Element eines HTML-Files zu definieren. Der Name ist frei definierbar. Im CSS mit einer Raute (#id-name) vornedran spezifiziert.

States (Pseudo-Class)

Alle States (Zustände) eines Elementes können separat im CSS gestaltet werden. Hover, Pressed, Focus, Visited, etc. Sie werden als Pseudoklassen bezeichnet. Pseudo, weil sie immer in Kombination mit einem Selektor stehen. Pseudoklassen sind klar definiert.

Darstellung eines HTML Textes sowie dem visuellen Pendant. Dabei wird unten erklärt, wie die unterschiedliche Vererbung funktioniert.
© Webdesign Essentials

Es gibt viele Selektoren

W3 School: Selektoren

Liste von HTML-Elementen

Liste von Pseudoklassen

Vertiefe dich ins ganze Kapitel

HTML & CSS Einführung für Designer:innen