CSS lernen: Dem HTML ein Gesicht geben

HTML liefert die Struktur, CSS (Cascading Style Sheets) liefert das Aussehen: Farben, Schriften, Abstände, ganze Layouts. Die Arbeitsteilung ist eine der besten Ideen des Webs. Derselbe HTML-Inhalt kann komplett unterschiedlich aussehen, je nachdem welches Stylesheet man ihm anzieht. Diese Website ist der lebende Beweis: modernes HTML, angezogen wie 1998.

Ein Vorgeschmack wie CSS aussieht:

CSS-Code

h1 {
    color: #000082;
    font-family: Arial, sans-serif;
}

Links steht wen es trifft (der Selektor, hier alle h1), in den geschweiften Klammern steht was passiert (Eigenschaft und Wert). Aus diesen zwei Zutaten besteht praktisch das ganze CSS-Universum.

Der Lernpfad

1. CSS einbinden: die drei Wege vom Stylesheet zur Seite.
2. Selektoren: Elemente gezielt ansprechen.
3. Klassen und IDs: eigene Anker fürs Styling setzen.
4. Farben: Hex, RGB, HSL und was wann taugt.
5. Schriftarten: font-family, Größen und Zeilenabstand.
6. Abstände: margin und padding auseinanderhalten.
7. Das Box Model: warum jedes Element ein Karton ist.
8. display: das Verhalten von Elementen umschalten.
9. position: Elemente aus dem Fluss lösen.
10. Flexbox: Dinge nebeneinander, endlich ohne Tricks.
11. CSS Grid: Layouts in Zeilen und Spalten denken.
12. Media Queries: CSS je nach Bildschirmgröße.
13. Responsive Design: die Strategie hinter alldem.
14. CSS-Variablen: Werte einmal definieren, überall nutzen.
15. Animationen: Bewegung mit transition und keyframes.

Ein Wort zur Geschichte

Es gab eine Zeit, da wurde das Aussehen direkt ins HTML geschrieben: font-Tags, bgcolor-Attribute, Layout-Tabellen. Wer eine Farbe ändern wollte, hat hundert Dateien angefasst. CSS hat damit aufgeräumt, und zwar so gründlich dass die alten Techniken heute im Museum stehen, genauer gesagt in unserem Retro-Web. Die Ironie, dass ausgerechnet dieses Retro-Wiki sein 98er-Aussehen komplett mit modernem CSS erzeugt, ist uns durchaus bewussst.

Grundlagen zum HTML darunter: HTML lernen · Begriffe: Glossar