CSS bereichert den HTML-Code mit Regeln für Schriften, Farben und Layout und ermöglicht so die genaue Darstellung der HTML-Elemente vorzudefinieren.
HTML strukturiert Webseiten und zeigt eine vordefinierte, sinngemässe Darstellung – nicht mehr und nicht weniger. Überschriften in h-Tags werden größer dargestellt als Fließtext in p-Tags. Die Schriftfarbe ist per Vorgabe Schwarz.
Die Teilung zwischen HTML und CSS trennt Inhalt und Design. Der HTML-Code liegt in einer Datei, die CSS-Regeln, die eine Webseite formatieren, liegen in einer anderen Datei. Das hält das Webdesign über alle Seiten des Internet-Auftritts konsistent.
CSS regelt also die Darstellung von HTML-Elementen: CSS-Eigenschaften beschreiben zum Beispiel die Schriftfamilie, Schriftgrösse und -farben, den Hintergrund und die Platzierung von Blöcken für das Layout der Webseite im Browserfenster.
Um das Design der Webseite aufzufrischen, reicht eine neue CSS-Datei. Die Struktur und der Inhalte der HTML-Dateien müssen nicht angefasst werden.
Aufbau von Stylesheet-Regeln
Eine CSS-Regel besteht aus dem Bezeichner für das Element, auf das die Regel zielt (dem CSS-Selektor) und aus Eigenschaften, die dem Element zugewiesen werden. CSS-Regeln stehen in geschweiften Klammern und sind durch Semikolons voneinander getrennt.
Selector {
Eigenschaft: Wert;
Eigenschaft: Wert;
Eigenschaft: Wert;
}
In diesem Beispiel ist der Selector der Name des HTML-Hyperlink-Tags <a>. CSS-Eigenschaften sind Bezeichnungen für Eigenschaften (z.B. color für die Schriftfarbe und font-family für die Schrift). Eine CSS-Regel ist die Zuweisung eines Werts an eine Eigenschaft.
Mit dieser CSS-Regel werden die Browser angewiesen, die Hyperlinks (Text innerhalb eines <a> Elements) mit einer gelben Hintergrundfarbe darzustellen.
Eigenschaften und ihre Werte werden immer klein geschrieben. Wenn der Selektor wie in diesem Beispiel ein HTML-Tag ist, wird der Selektor ebenfalls immer klein geschrieben. Wenn ein Wert eine Massangabe enthält wie max-width: 400px, wird die Maßeinheit ohne Leerzeichen direkt hinter den Wert gesetzt.
Die einfachen Regeln für HTML und CSS sind der Grundstein für den Erfolg des Webs. Die Liste der CSS-Eigenschaften ist zwar lang und wird immer länger, aber CSS ist einfach:
h1 { font-family: Helvetica, sans-serif; }
Nimm alle h1-Tags und setze sie in der Schrift «Helvetica» und falls diese nicht auf dem Benutzersystem vorhanden ist nimm die serifenlose System-Default-Schrift.
CSS in HTML-Seiten einbinden
CSS Inline
Fast alle CSS-Eigenschaften können in das style-Attribut direkt in das HTML-Tag geschrieben werden.
<p style="color:teal; font-family:'Museo Sans',Helvetica,sans-serif">
Hier wirkt der Stil direkt
</p>
Das macht aber nur Sinn, wenn es sich bei den CSS-Stilen für das p-Tag um eine Ausnahme handelt.
style-Tag
Stylesheet-Regeln werden im Kopf des HTML-Dokuments in style-Tags notiert.
<head>
…
<style type="text/css" media="all">
p { color: white; background: green; width: 500px; }
</style>
</head>
Besser ist es allerdings, die CSS-Regeln in eine externe Datei auszulagern. So bleibt das Dokument übersichtlich und Änderungen wirken direkt auf allen Seiten, die durch das Stylesheet formatiert werden.
Externe CSS-Datei
<head>
…
<style>
@import url("style.css");
</style>
</head>
oder noch besser
<head>
…
<link rel="stylesheet" href="style.css">
</head>
Die externe Stylesheet-Datei ist eine einfache Textdatei, in der die CSS-Regeln des Dokument notiert sind. Die Zeichen /* und */ schließen einen CSS-Kommentar ein, der vom Browser überlesen wird. Das style-Tag wird in einer externen CSS-Datei nicht notiert.
/* Kommentar: das ist meine externe CSS Datei */
body { background: silver url(logo.png) repeat-x; }
p { margin: 0; color: rgba(61,162,241,0.8); }
Das CSS Boxmodell
Eine wichtige Eigenschaft von CSS müssen wir uns noch anschauen. Jedes (HTML-) Element in CSS wird durch sein Box-Modell definiert. Jedes Element besitzt durch diese Vorgabe die Eigenschaften padding, border und margin, welche für alle 4 Seiten der Box zusammen oder getrennt gestaltet werden können.
Jedes Element besitzt also eine Intimsphäre (Padding), einen Rahmen (Border) und eine Aura (Margin). Dies sieht folgendermassen aus:
Und etwas genauer aufgeschlüsselt:
Zu beachten: Mit den Eigenschaften width und height definieren wir also nicht die absolute Höhe und Breite sondern es kommen immer noch Padding, Border und Margin dazu. Falls ein Element wirklich nur gerade die definierte Breite und Höhe einnehmen darf, dann müssen padding, border und margin explizit auf 0 gestellt werden.
footer {
width: 500px;
height: 50px;
padding: 0;
border: 0;
margin: 0;
}