HTML trifft auf CSS

Selektoren

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

HTML-Element

Das HTML-Element selbst ist ein dominanter 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