CSS Grundlagen • Einführung in Cascading Style Sheets • Wie schreibt man CSS Regeln • Trennung von Design und Inhalt • CSS Basics

Website Advisor

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 vorteilhaft, wenn das Design vollständig von der Struktur getrennt wird. Dies erreicht man mit einer externen Styles-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 hunderten Webseiten, die gleich formatiert sein sollen. Hier hat sich durchgesetzt, dass das Stylesheet in einer separaten Styles-Datei gespeichert wird. Durch ein link-Tag im head-Bereich der HTML-Datei wird das Stylesheet 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 vom head-Element.

Das rel-Attribut des link-Elements hat den Wert "stylesheet" und teilt dem Browser dadurch mit, dass das href-Attribut eine Referenz (URL) 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 type bezeichnet das das Ausgabemedium. Erlaubt sind zum Beispiel die Werte "screen" für Bildschirm und "print" für Drucker. Wenn das Attribut nicht definiert ist, wird Standardwert "all" verwendet.

Wie sind CSS-Regeln aufgebaut?

Eine Regel besteht grundsätzlich aus drei Teilen:

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 ganze 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) angegeben werden. Tipp: Benutze eine relative Einheit.

Text ausrichten

Gibt die Textausrichtung an. D.h. linksbündig, rechtsbündig, zentriert oder im 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 Außenabstand wird als Weißraum oder Leerraum bezeichnet. Durch Weißräume kann das Layout einer Seite wirkungsvoller gestaltet werden.

Padding

Diese Eigenschaft bezeichnet den Innenabstand eines HTML-Elements. Der Innenabstand bezeichnet den Abstand eines Elements zu seinem eventuell nicht sichtbaren (transparenten) Rahmen. Der Abstand zum Rahmen kann für alle vier Seiten (oben, unten, rechts und links) 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.