CSS Grundlagen: Web-Design Schritt für Schritt lernen
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 Stylesheets in HTML-Seiten 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 mit, dass das href-Attribut eine Referenz auf eine Stylesheet-Datei ist. Diese beiden Attribute sind notwendig und ausreichend.
Das type-Attribut bezeichnet den Medientyp. Für CSS ist das der Wert "text/css". Da dies der Standard ist, kann man diese Angabe weglassen.
Das media-Attribut 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;
}Bei HTML-Elementen, Klassen und IDs wird je nach Dokument-Typ zwischen Groß- und Kleinschreibung unterschieden.
Bei Class und ID-Selektoren wird bei allen Dokumenttypen zwischen Groß- und Kleinschreibung unterschieden. So sind zum Beispiel die IDs #example und #Example unterschiedliche Dinge.
Bei Namen für Eigenschaften und Werte (außer Namen für Schriften) ist in der Regel Groß- und Kleinschreibung nicht relevant.
Zusammenfassend kann man deshalb sagen, dass es sinnvoll ist, wenn für alle HTML-Elemente, Eigenschaften und Werte außer Schriftnamen nur Kleinbuchstaben verwendet werden.
Die wichtigsten CSS Regeln
Wenn man beginnt mit Stylesheets zu arbeiten, lernt man zuerst die folgenden Eigeschaften kennen.
Schriftart
Die Eigenschaft Font-Family 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
Mit Font-Size wird die Schriftgröße für einzelne HTML-Elemente oder für ganze Bereiche der Seite festgelegt. 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
Die Eigenschaft Text-Align gibt die Textausrichtung an, d.h. linksbündig, rechtsbündig, zentriert oder Blocksatz.
Text-Dekoration
Text-Decoration 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
Background definiert die Hintergrundfarbe für einzelne HTML-Elemente oder ganze Bereiche der Webseite.
Color
Color definiert die Schriftfarbe (bzw. Vordergrundfarbe). Achte stets darauf, dass der Kontrast zwischen Hintergrund und Vordergrund ausreichend groß ist, um die Lesbarkeit der Webseite zu gewährleisten.
Margin
Mit Margin wird der Außenabstand eines HTML-Elements zu seinem Eltern-Element und seinen angrenzenden 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
Mit Padding wird der Innenabstand eines HTML-Elements definiert. 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 festgelegt werden.
Border
Mit Border-wird der Rahmen für ein HTML-Element festgelegt. Der Rahmen kann für alle vier Seiten des Elements individuell definiert 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 einfacher wird dir das Gestalten von Webseiten gelingen.
CSS Grid
Das CSS Grid-Layout ist ein Raster zur Gestaltung von Webseiten in Zeilen und Spalten. Die Elemente innerhalb des Grid-Containers werden anhand eines rechteckigen Rasters ähnlich einer Tabelle ausgerichtet. Grid ist eine Lösung für komplexe, verschachtelte Web-Designs. Wer individuelle Web-Layouts erstellen möchte, sollte das Grid-System verwenden. Mit diesem System können ganz einfach flexible Layouts gestaltet werden, die zudem noch responsiv sind.