CSS Grundlagen

Zur Erinnerung: HTML dient dazu, die Struktur einer Webseite zu beschreiben. Dies erfolgt mit diversen HTML-Tags. Die visuelle Erscheinung der Webseite wird mit CSS definiert. Diese Aufteilung von Struktur und Design hat viele Vorteile. Grundsätzlich ist es von Vorteil, wenn das Design komplett von der Struktur getrennt wird. Dies erreicht man mit einer externen Style-Sheet-Datei, die in die HTML-Seite eingebunden wird.

externe Style-Sheets in eine HTML-Seite einbinden

Eine Website besteht normalerweise aus vielen, häufig sogar aus mehreren hundert oder noch mehr Webseiten, die gleich formatiert sein sollen. Hier hat sich durchgesetzt, dass das Stylesheet in einer separaten .css-Datei gespeichert wird. Durch ein link-Tag im head-Bereich der HTML-Datei wird die Stylesheet-Datei mit der HTML-Datei verknüpft.

<!DOCTYPE html>
<html lang="de">

<head>
<title>Titel der Webseite</title>
 ⋮⋮
<!-- weitere Kopfinformationen -->
<!-- Kommentare werden im Browser nicht angezeigt -->
 ⋮⋮
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
 ⋮⋮
</body>
</html>

Das link-Element ist ein Kind-Element (Englisch: Child Element) vom head-Bereich.

Das rel-Attribut des link-Elements hat den Wert "stylesheet" und teilt dem Browser dadurch mit, dass das href-Attribut eine Referenz auf eine Stylesheet-Datei ist. Diese beiden Attribute sind notwendig und ausreichend.

Das Attribut type bezeichnet den Medientyp. Für CSS ist das der Wert "text/css". Da dies der Standard ist, kann diese Angabe weggelassen werden.

Das Attribut media bezeichnet das Ausgabemedium. Erlaubt sind zum Beispiel die Werte "screen" für Bildschirm und "print" für Drucker. Wenn das Attribut nicht definiert ist, wird der Standard-Wert "all" für alle Geräte verwendet.

Wie sind CSS-Regeln aufgebaut?

Eine CSS-Regel besteht grundsätzlich aus drei Teilen:

einem Selektor (Englisch: Selector)
einer Eigenschaft (Englisch: Property)
und einem Wert (Englisch: Value)

Selektor {
  Eigenschaft: Wert;
}

Die wichtigsten CSS Regeln

Wenn man beginnt, mit Stylesheets zu arbeiten, lernt man zuerst die folgenden Eigeschaften kennen.

Schriftart

Definiert die Schriftart (Schriftfamilie) für einzelne HTML-Elemente oder für ganze Bereiche der Webseite. Es kann entweder eine einzelne Schriftart oder eine Liste von alternativen Schriftarten angegeben werden.

Schriftgröße

Bestimmt die Schriftgröße für einzelne HTML-Elemente oder für ganze Bereiche der Seite. Die Schriftgröße kann in einer absoluten Einheit (z.B. px) oder in einer relativen Einheit (z.B. em) definiert werden. Tipp: Verwende immer relative Einheiten.

Text ausrichten

Gibt die Textausrichtung an, d.h. linksbündig, rechtsbündig, zentriert oder Blocksatz.

Text-Dekoration

Bestimmt die Textauszeichnung. Damit wird angegeben, ob Text unterstrichen oder durchgestrichen dargestellt werden soll. Tipp: Vermeide es, Text zu unterstreichen. Denn unterstrichener Text könnte mit einem Link verwechselt werden.

Background

Definiert die Hintergrundfarbe für einzelne HTML-Elemente oder ganze Bereiche der Webseite.

Color

Definiert die Schriftfarbe (oder allgemeiner Vordergrundfarbe). Achte stets darauf, dass der Kontrast zwischen Hintergrund und Vordergrund ausreichend groß ist.

Margin

Mit dieser Eigenschaft wird der Außenabstand eines HTML-Elements zu seinem Eltern-Element und zu seinen Nachbar-Elementen festgelegt. Die Abstände für alle vier Seiten (oben, unten, rechts und links) können individuell konfiguriert werden. Der durch margin definierte Abstand wird als Weißraum bzw. Leerraum bezeichnet. Durch Weißräume kann das Layout einer Seite wirkungsvoll gestaltet werden.

Padding

Diese Eigenschaft bezeichnet den Innenabstand eines HTML-Elements. Der Innenabstand bezeichnet den Abstand eines Elements zu seinem (eventuell nicht sichtbaren, d.h. transparenten) Rahmen. Der Abstand zum Rahmen kann für alle vier Seiten individuell konfiguriert werden.

Border

Diese Eigenschaft definiert den Rahmen für ein HTML Element. Der Rahmen kann für alle vier Seiten des Elements individuell bestimmt werden.

Box-Modell

Alle Elemente werden grundsätzlich als rechteckige Box (Kasten) dargestellt. Das Box-Modell ist für das Verständnis von Stylesheets von grundlegender Bedeutung. Je besser du dieses Modell verstehst, desto leichter wird dir das Gestalten von Webseiten gelingen.