4. CSS Grundlagen & Trennung

CSS dient der Gestaltung. Wir trennen Inhalt (HTML) strikt von der Optik (CSS), um den Code wartbar zu halten.

body {
  background-color: #f5f8f2;
  color: #0a3321;
}

4. CSS Grundlagen

Wenn HTML das nackte Skelett deiner Website ist, dann ist CSS (Cascading Style Sheets) die komplette Inneneinrichtung, die Fassade und die Dekoration. Mit CSS bestimmst du, wie schön deine Seite aussieht. Ohne CSS sähen alle Webseiten fast gleich aus: schwarze Schrift auf weißem Hintergrund, alles linksbündig. Mit CSS kannst du sagen: "Ich möchte, dass der Hintergrund dunkelblau ist, die Schrift weiß und dass alles in der Mitte der Seite steht". Das Ganze funktioniert über Regeln. Du wählst erst aus, was du verändern willst (den Selektor, zum Beispiel h1 für die Überschrift) und schreibst dann in Klammern, was passieren soll (zum Beispiel color: red;). Der Name "Cascading" bedeutet "hintereinanderfallend". Das heißt, der Browser liest die Regeln von oben nach unten. Wenn du oben sagst, die Schrift soll blau sein, aber weiter unten schreibst, sie soll grün sein, dann gewinnt die untere Regel – die grüne Farbe wird angezeigt. Das Tolle an CSS ist, dass man Design und Inhalt trennt. Du kannst eine einzige CSS-Datei für hunderte Unterseiten benutzen. Wenn du dann entscheidest, dass alle Überschriften statt Blau nun Pink sein sollen, änderst du es nur an einer Stelle im CSS, und zack – die ganze Website ist aktualisiert. Das spart unglaublich viel Zeit und Arbeit.