Einführung in CSS

CSS steht für Cascading Style Sheets — Gestaltungsanweisungen für das Ausgabemedium (Browser, Drucker …).

Grundidee: saubere Trennung von Inhalt (HTML) und Darstellung (CSS).

Die Notation einer CSS-Regel ist denkbar einfach: Selektor { Eigenschaft: Wert; }

/* Selektor { Deklaration } */
h2 {
    color: #7559a6;
}

b {
    color: #ff0;
    text-decoration: underline;
}

/* Kombinator: letztes <p> innerhalb von <main> */
main p:last-child {
    background: #9acfea;
    border: 3px dotted #0d1318;
    padding: 1em;
}

Diese drei CSS-Regeln sind bereits aktiv auf dieser Seite — beobachte die Effekte im Inhaltsbereich unten.

Hallo! (h2 ist lila — wegen color: #7559a6)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Zwischenüberschrift

Und weil es so schön ist kommt hier direkt noch mehr Text, sogar mit einem hervorgehobenen Wort (gelb + unterstrichen — wegen der b-Regel).
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Ich bin das letzte <p> in <main> — hellblauer Hintergrund, gepunkteter Rahmen, wegen main p:last-child.