CSS lernen leicht gemacht: Grundlagen von CSS

In meinem letzten Blogartikel haben wir den Grundstein gelegt: HTML. Wir haben gelernt, wie man einer Webseite Struktur gibt. Doch eine Webseite, die nur aus HTML besteht, sieht meistens sehr funktional und schlicht aus – fast wie ein nacktes Skelett.

Heute gehen wir den nächsten Schritt in unserer inklusiven Kursreihe: CSS (Cascading Style Sheets). In diesem Artikel erkläre ich, was CSS ist, warum es für die Barrierefreiheit so wichtig ist und wie blinde sowie sehende Menschen gemeinsam modernes Webdesign lernen können.

Auf dem Bild ist CSS-Code, Text, Ein Symbol für Barrierefreiheit und eine Lupe.

Was ist CSS?

CSS steht für Cascading Style Sheets. Während HTML den Inhalt liefert (z. B. „Das ist eine Überschrift“), sagt CSS dem Browser, wie dieser Inhalt aussehen soll (z. B. „Die Überschrift soll dunkelblau sein, eine serifenlose Schrift nutzen und 20 Pixel Abstand nach unten haben“).

Für die Barrierefreiheit ist die Trennung von Inhalt (HTML) und Design (CSS) extrem wichtig. So können Screenreader die Struktur sauber erfassen, während wir für sehende Nutzer ein schönes Layout gestalten.

Die drei Arten, CSS einzubinden

Es gibt drei Möglichkeiten, wie Sie CSS-Anweisungen in Ihr HTML-Dokument bringen können. Aus Sicht der Inklusion und Wartbarkeit ist die dritte Variante fast immer die beste.

1. Inline-CSS (Direkt im HTML-Element)

Hier schreibt man das Design direkt in das HTML-Tag mit dem Attribut style. Das ist sehr unübersichtlich und sollte nur in Ausnahmefällen genutzt werden.

<p style="color: red;">Dieser Text ist rot.</p>

2. Internes CSS (Im Head-Bereich)

Man schreibt die Styles in den <head> der HTML-Datei innerhalb eines <style>-Tags. Das ist okay für einzelne, kleine Webseiten.

<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

3. Externes CSS (Die Profi-Lösung)

Sie erstellen eine eigene Datei (z. B. style.css) und verknüpfen sie im HTML-Head. Das ist die sauberste Methode, da Design und Inhalt komplett getrennt sind.

<head>
  <link rel="stylesheet" href="style.css">
</head>

Die Syntax: Wie eine CSS-Regel aufgebaut ist

CSS ist sehr logisch aufgebaut. Eine Regel besteht immer aus drei Teilen:

Selektor: Wer soll gestaltet werden? (z. B. alle h1)
Eigenschaft: Was soll geändert werden? (z. B. die Farbe color)
Wert: Wie soll es aussehen? (z. B. blue)

So sieht das im Code aus:

/* Selektor { Eigenschaft: Wert; } */
h1 {
  color: navy;
  font-size: 2rem;
}

Wichtig: Nach der Eigenschaft kommt ein Doppelpunkt, und jede Anweisung muss mit einem Semikolon ; enden!

Globale Selektoren, Kaskade und Vererbung

Warum heißt es eigentlich Cascading Style Sheets? Das Wort „Cascade“ bedeutet Wasserfall. Das Design „fließt“ von oben nach unten durch dein Dokument.

Globale Selektoren: html und der Stern (*)

Bevor wir einzelne Elemente gestalten, nutzen wir oft Selektoren, die die gesamte Seite betreffen:

html: Dies ist das oberste Element (die Wurzel). Alles, was Sie hier festlegen, bildet das Fundament für das gesamte Dokument.
Der Stern-Selektor (*): Das ist ein „Joker“. Er wählt absolut jedes Element auf der Seite aus. Profis nutzen ihn oft, um Standard-Abstände zurückzusetzen.

Die Vererbung (Inheritance)

Wenn Sie dem <html> oder <body> (den Eltern-Elementen) eine Schriftfarbe geben, erben alle Elemente darin (Absätze, Listen, Überschriften) diese Farbe automatisch, sofern Sie nichts anderes festlegen. Das spart viel Tipparbeit und sorgt für ein einheitliches Design.

Die Kaskade (Priorität)

Wenn es zwei Regeln gibt, die sich widersprechen, gewinnt meistens die letzte. Ein Beispiel:

p {
  color: blue;
}

p {
  color: red; /* Diese Regel gewinnt, weil sie weiter unten steht */
}

Modernes CSS: Variablen und :root

In der modernen Webentwicklung arbeitet man heute mit CSS-Variablen. Diese werden zentral im :root-Bereich definiert. Das hat den großen Vorteil für die Barrierefreiheit: Wenn Sie merken, dass ein Kontrast nicht ausreicht, ändern Sie den Wert an einer einzigen Stelle, und die gesamte Webseite passt sich an.

Besonders spannend ist die Funktion clamp(). Sie sorgt dafür, dass Schriftgrößen „intelligent“ sind. Sie passen sich der Bildschirmgröße an, werden aber niemals kleiner oder größer als ein von Ihnen festgelegter barrierefreier Bereich.

:root {
    /* Farben zentral definieren */
    --color-primary: #034E4D;
    --color-background-light: #FCFBFA;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-blue-row: #0000FF;
    --color-link: #00008B;
    --color-highlight-bg: #c0ccdc;
    --color-table-head: #034E4D;
    --color-table-even-link: yellow;

    /* Barrierefreie, flexible Schriftgrößen */
    --font-size-base: clamp(1rem, 1.2vw, 1.125rem);       /* 16px–18px */
    --font-size-h1: clamp(1.8rem, 2.5vw, 2.5rem);         /* 29px–40px */
    --font-size-h2: clamp(1.4rem, 2vw, 2rem);             /* 22px–32px */
    --font-size-small: clamp(0.875rem, 1vw, 1rem);        /* 14px–16px */
}

/* Anwendung der Variablen */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--color-background-light);
    color: var(--color-black);
    font-size: var(--font-size-base);
}

Schlussbemerkung

CSS ist das Werkzeug, mit dem wir Webseiten barrierefrei und ansprechend gestalten. Wir wissen nun, wie man CSS einbindet, wie die Kaskade funktioniert und wie wir mit Variablen ein flexibles, inklusives Design schaffen. Im nächsten Teil schauen wir uns an, wie wir Texte so gestalten, dass sie für jeden gut lesbar sind.

Haben Sie Fragen zu Selektoren, Variablen oder der Kaskade? Schreiben Sie mir gerne!

Kontakt:
E-Mail: info@marlem-software.de
Telefon: 07072/1278463

Ihr Markus Lemcke

Weiterlesen

CSS lernen leicht gemacht: Design für alle – inklusiv und barrierefrei

Autor: Markus Lemcke

Ich bin Markus Lemcke, Softwareentwickler, Webentwickler, Appentwickler, Berater und Dozent für barrierefreies Webdesign, barrierefreie Softwareentwicklung mit Java, C# und Python, Barrierefreiheit bei den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS. Alle Beiträge von Markus Lemcke anzeigen