CSS - Grundlagen

CSS Grundlagen

CSS bereichert den HTML-Code mit Regeln für Schriften, Farben und Layout und erlaubt so die genaue Darstellung der HTML-Elemente.
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 eines HTML-Tags bzw. eines HTML-Elementes wie p oder h1. CSS-Eigenschaften sind Bezeichnungen für Attribute dieses HTML-Elementes (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 Texte in HTML-p-Tags dunkelgrau in der Schrift «Arial» und einer orange-farbigen, durchgezogenen Umrahmung in 2 Pixeln Breite  zu zeigen.

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; }
Nimm alle h1-Tags und setze sie in der Schrift »Helvetica« …

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); }