CSS — Stil und Layout (neu)

Lernziele

Sie wissen, wo im HTML-Dokument CSS typischerweise eingefügt wird.

Sie können Element-, Klassen- und ID-Selektoren unterscheiden und einsetzen.

Sie können rudimentäre CSS-Formatierungen schreiben (Farben, Schrift, Abstände, Rahmen).

Sie verstehen das Konzept der Spezifität bei widersprüchlichen Regeln.

Sie kennen die Grundlagen von Flexbox für einfache Layouts.

Was ist CSS?

CSS steht für Cascading Style Sheets und ist eine Stylesheet-Sprache. Während HTML die Struktur und den Inhalt einer Webseite beschreibt, bestimmt CSS, wie diese Elemente aussehen.

Achtung

Auch CSS ist keine Programmiersprache, weil es keine Logik oder Funktionen beinhaltet, die Dinge berechnen oder Entscheidungen treffen können.

Im echten Leben liegt CSS oft in einer separaten Datei (z.B. style.css), die im <head> mit <link rel="stylesheet" href="style.css"> eingebunden wird. Im Editor hier schreiben wir CSS direkt in einen <style>-Block — das ist für kleine Beispiele übersichtlicher.

CSS-Selektoren

Der Schlüssel zu CSS sind die Selektoren vor der geschweiften Klammer {. Ein Selektor bestimmt, welche Elemente im HTML vom nachfolgenden Stil betroffen sind.

Es gibt drei Hauptarten:

Element-Selektor

Stile werden auf alle Elemente eines bestimmten Typs angewendet.

Klassen-Selektor

Stile werden nur auf Elemente angewendet, die eine bestimmte Klasse haben. Klassen werden im HTML mit dem Attribut class="..." definiert. Im CSS schreibt man einen Punkt vor den Klassennamen.

ID-Selektor

Stile werden auf das eine Element mit einer bestimmten ID angewendet. IDs sind im Gegensatz zu Klassen eindeutig — pro Seite jeweils nur einmal vergeben. Im CSS schreibt man eine Raute # vor die ID.

Selektoren kombinieren

Die drei Arten lassen sich beliebig kombinieren. h1.artikel selektiert nur <h1>-Elemente, die zusätzlich die Klasse artikel haben.

Sie sind dran!

Welche der folgenden Tags würde der Selektor h1.artikel selektieren?

<h1 class="artikel blau">Wichtige Headline!</h1>

<h1 class="blau">Über uns</h1>

<p class="artikel blau">Möchtegern-Headline</p>

<h1 class="artikel orange">Noch eine Headline!</h1>

Lösung

Selektiert werden 1 und 4 — beide sind <h1> und haben die Klasse artikel.

2 ist zwar <h1>, hat aber nicht die Klasse artikel.

3 hat zwar die Klasse artikel, ist aber kein <h1>.

Häufig verwendete CSS-Eigenschaften

Hier eine Auswahl als Nachschlagewerk:

Eigenschaft	Was sie macht	Beispiel
`color`	Textfarbe	`color: red;`
`background-color`	Hintergrundfarbe	`background-color: #4CCD99;`
`font-family`	Schriftart	`font-family: Arial, sans-serif;`
`font-size`	Schriftgrösse	`font-size: 16px;`
`font-weight`	Schriftstärke (`normal`, `bold`, `100`–`900`)	`font-weight: bold;`
`font-style`	Schriftstil (`normal`, `italic`)	`font-style: italic;`
`text-align`	Textausrichtung	`text-align: center;`
`border`	Rahmen	`border: 1px solid black;`
`border-radius`	Abgerundete Ecken	`border-radius: 5px;`
`padding`	Innenabstand zwischen Inhalt und Rand	`padding: 10px;`
`margin`	Aussenabstand zu anderen Elementen	`margin: 20px;`
`width`, `height`	Breite und Höhe	`width: 50%;`

Jetzt sind Sie dran!

Im folgenden Editor sehen Sie eine schlichte Webseite. Geben Sie ihr Stil — mit mindestens fünf eigenen CSS-Regeln. Tipps:

Geben Sie dem body eine Hintergrundfarbe.

Geben Sie den <h2>-Überschriften eine andere Farbe als den Paragraphen.

Versuchen Sie padding und border-radius an einer der Boxen.

Abstände verstehen — das Box-Modell

Jedes HTML-Element ist im Grunde eine Box. Diese Box hat vier Schichten:

Inhalt (content) — der eigentliche Text oder das Bild
Padding — Abstand zwischen Inhalt und Rahmen, innerhalb der Box
Border — der Rahmen selbst
Margin — Abstand zu anderen Elementen, ausserhalb der Box

Das ist eine der häufigsten Verwirrungen am Anfang. Spielen Sie mit dem Beispiel und ändern Sie die Werte:

Wer gewinnt bei Widersprüchen? Spezifität

Was, wenn verschiedene Selektoren widersprüchliche Stile definieren?

Der dritte Paragraph ist rot — obwohl die Regel p { color: grey; } weiter unten steht. Der Browser folgt dem Prinzip der Spezifität: Die Regel mit der "detailliertesten" Zielauswahl gewinnt.

Punktesystem zur Spezifität:

Element- und Pseudoelement-Selektoren (p, ::before): 1 Punkt
Klassen-, Attribut- und Pseudoklassen-Selektoren (.rot, [type=text], :hover): 10 Punkte
ID-Selektoren (#haupttitel): 100 Punkte

In unserem Beispiel:

p.rot hat 1 + 10 = 11 Punkte
p hat 1 Punkt

Deswegen gewinnt p.rot.

Tipp aus der Praxis

Wenn Sie sich später wundern, warum Ihre CSS-Regel "nicht greift": Wahrscheinlich gibt es eine andere Regel mit höherer Spezifität. In den Browser-DevTools (F12) sehen Sie genau, welche Regel ein Element wie beeinflusst.

Layout mit Flexbox — Elemente nebeneinander

Standardmässig stapeln sich Block-Elemente wie <div> oder <p> untereinander. Sehr oft will man sie aber nebeneinander haben — z.B. für eine Navigation, Karten in einem Shop, Spalten in einem Layout.

Die einfachste moderne Lösung dafür ist Flexbox. Sie geben dem Eltern-Element die Eigenschaft display: flex, und schon werden die Kinder horizontal angeordnet.

Wichtige Flex-Eigenschaften für den Anfang:

Eigenschaft (am Container)	Was sie macht
`display: flex`	Aktiviert Flexbox.
`gap: 10px`	Abstand zwischen den Kindern.
`justify-content: center`	Horizontale Ausrichtung der Kinder (`flex-start`, `center`, `flex-end`, `space-between`).
`align-items: center`	Vertikale Ausrichtung der Kinder.
`flex-wrap: wrap`	Bricht in mehrere Zeilen um, wenn der Platz nicht reicht.

Jetzt sind Sie dran!

Bauen Sie eine Navigationsleiste mit vier Knöpfen nebeneinander: Home, Kurse, Über uns, Kontakt. Geben Sie ihnen Hintergrundfarbe, Padding und runde Ecken. Lassen Sie sie sich gleichmässig auf die ganze Breite verteilen.

Eine mögliche Lösung

<style>
  .container {
    display: flex;
    gap: 8px;
    background-color: #222;
    padding: 12px;
  }
  .link {
    flex: 1;
    background-color: #0084ff;
    color: white;
    padding: 12px;
    text-align: center;
    border-radius: 5px;
  }
</style>

Selektoren-Spiel als Übung

Wenn Sie die Selektoren so richtig in den Fingern haben wollen: CSS Diner ist ein kostenloses Browser-Spiel, das Sie durch alle CSS-Selektoren-Levels führt. Es lohnt sich, mindestens bis Level 11 zu kommen.

In der nächsten Lektion verlassen wir die "statische" Welt und schauen, wie man mit JavaScript auf Klicks reagieren kann.