Im Grunde genommen besteht CSS aus Regeln (z.B. Hintergrundfarbe eines Elementes, Textgrösse, Textfarbe). Mittels Selektoren wählt man aus, auf was für Elemente, Klassen oder IDs diese Regeln angewendet werden.

Es gibt drei Arten von Selektoren, die am meisten benutzt werden; universelle Selektoren, Type Selektoren und Class/ID Selektoren.

Universelle

Universelle Selektoren werden mit einem Asterisk * geschrieben.

Die Regeln, die im Universellen Selektor aufgestellt wurden, gelten für die ganze Website oder Webseite (je nachde, ob das CSS Dokument für die Website gilt oder für nur eine Seite).

Type Selektoren

Type Selektoren selektrieren nach Elementen. Dafür muss man nur den Namen des Elementes schreiben (ohne Öffnungs- und Schliessungstag oder ähnliche Zeichen).

Die Regeln, die dort aufgestellt wurden, gelten nur für die Elemente, die ausgewählt wurden.

Class & ID Selektoren

Class Selektoren werden so geschrieben, indem man zuerst einen Punkt setzt und dann den Namen der Class ohne Leerzeichen hinschreibt.

.ClassName {Aufgestellte: Regel;}

Bei IDs ist die Syntax die selbe, jedoch muss man ein # anstatt einen . schreiben.

Das praktische an Classes ist, dass man damit mehrere Elemente/Container auswählen kann, ohne dass man die Regeln für das gesamte Element aufstellt.

Bei Classes kann man auch Elementübergreifend Regeln aufstellen; z.B. <div class="BeispielClass"> <span class=BeispielClass>, beide Elemente kriegen dasselbe Styling, sofern es das Rendering erlaubt (div ist ein block und span ist inline).

Einfache Syntax

Bei Selektoren schreibt man, wie Sie im Bild sehen können, zuerst das, was selektiert werden soll. Daraufhin folgt ein geschweiftes Klammernpaar, indem dann die Regeln stehen.

Bei den Regeln kommt zuerst die Eigenschaft der Regel, dann ein Doppelpunkt :.

Hinter dem Doppelpunkt ist dann der Wert der Regel, dann folgt ein Semicolon ; um das Ende der Regel anzuzeigen. Letzendlich beendet die schliessende geschweifte Klammer die Selektion.

Sie können auch mehrere Elemente, Classes oder IDs auf einmal selektieren, indem Sie zuerst das erste Element der Selektion schreiben, dann ein Komma gefolgt von einem Leerzeichen und dann den Namen des weiteren Elementes.

.BeispielClass, #Beispiel-ID {Aufgestellte: Regel;}