Diese Dokumentation ist stark vereinfacht und beschränkt sich auf die wesentlichen Grundlagen.

Grundlage

HTML Klassen

Die CSS-Datei besteht aus einer Reihe von Klassen. Eine Klasse besteht aus dem Namen, gefolgt von einer geschweiften Klammer, in welche die einzelnen Definitionen notiert werden. Die Namen der HTML-Tags können 1:1 übernommen werden.

In obigem Beispiel bekommt das Body-Tag einen weissen Hintergrund und schwarzen Text, die Schrift und die Grösse ist definiert. Das gilt erst mal global, solange ein anderes Tag die Werte nicht überschreibt.

Anschliessend bekommen h1 und h2 eine andere Textfarbe (grau). Alle anderen Werte werden vom body übernommen.

Im nächsten Schritt werden h1 und h2 jeweils eine eigene Textgrösse zugeordnet. Alle anderen Werte bleiben wie definiert.

Da für das P-Tag keine Definition vorhanden ist, übernehmen die Absätze die Werte des Body-Tag.

Das ist die sparsamste Codierung, die so anzuwenden auch Sinn macht. Man könnte auch jede Klasse einzeln aufführen und jeweils alle 4 Definitionen eintragen. Das bläst aber nur den Code unnötig auf.

Wie Sie sehen können Sie die Klassen einzeln listen oder gruppiert.

Eigene Klassen

Nebst den vorgegebenen HTML Klassen können Sie beliebig weitere Klassen definieren. Diese weisen einfach z.B. einem Absatz zu, indem Sie ihm das Attribut class mit dem Namen Ihrer Klasse anfügen.

In unserem Beispiel mit der Klasse info-grey sehen Sie der Hinweis mit dem grauen Hinweis und der senkrechten Linie zustanden gekommen ist.

Klassen können Sie jedem HTML-Tag zuweisen, insbesondere dem <div> und dem <span>.