Regeln und Prinzipien: Dein Einstieg in CSS

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, mit der du das Erscheinungsbild und die Darstellung einer Website definieren kannst. Sie ermöglicht die Trennung von Inhalten und Design. Konkret bedeutet das, dass HTML die Struktur der Website vorgibt, während CSS die Gestaltung der Inhalte übernimmt. So kannst du das Layout, die Farben, Schriftarten und andere visuelle Aspekte einer Webseite unabhängig von den eigentlichen Inhalten festlegen.

Hinweis: Bevor du dich mit CSS beschäftigst, solltest du bereits ein Grundverständnis von HTML haben. Lies dazu bitte das Tutorial Einstieg in HTML und komme hier dann wieder zurück.

Regeln

Eigenschaften bestimmen das Aussehen von HTML-Elementen. In CSS sind diese innerhalb von Regeln organisiert. Eine Regel besteht aus einem oder mehreren durch Komma (,) getrennten Selektoren und einem durch geschweiften Klammern ({ und }) begrenzten Block von Deklarationen.

Die Selektoren bestimmen, auf welche HTML-Elemente die Deklarationen angewendet werden sollen. Eine Deklaration besteht aus einer oder mehreren Eigenschaften und den dazugehörigen Werten. Eine Eigenschaft wird durch einen Doppelpunkt (:) vom Wert getrennt und mit einem Semikolon (;) abgeschlossen.

<h2>Meine Überschrift</h2>

h2 {
  font-size: 1.5rem;
  font-weight: 500;
  color: red;
}

Übrigens: Die geschweiften Klammern findest du auf einer Windows-Tastatur unter AltGr + 7 und AltGr + 0. Auf einer Mac-Tastatur findest du sie unter ⌥ Option + 8 und ⌥ Option + 9.

Selektoren

Mit den Selektoren kannst du also festlegen, auf welche Elemente die CSS-Regeln angewendet werden sollen. Es gibt verschiedene Arten von Selektoren: Elementselektoren, Klassenselektoren, ID-Selektoren, Attributselektoren und Pseudoklassen.

Elementselektor

Die Selektoren p, div, a wählen die HTML-Elemente <p>, <div> und <a> aus.

Klassenselektor

Klassen werden mit einem Punkt (.) vor dem Klassennamen definiert. .my-box selektiert so <div class="my-box">.

ID-Selektor

Die Rauto (#) wird vor die ID gesetzt. #alert selektiert <div id="alert">.

Attributselektor

Attribute wie <input type="text"> wählt man mittels Attributselektor aus: [type="text"].

Pseudoklassen

Werden verwendet, um Elemente in einem bestimmten Zustand auszuwählen: :hover, :focus oder :active. Zum Beispiel button:hover, oder .btn:hover.

Stellen wir uns nun ein Formular vor, das zwei Buttons enthält. Einen Abbrechen-Button und einen Absende-Button:

<button type="button" class="btn" id="cancel-button">Abbrechen</button>

<button type="submit" class="btn btn-primary">Absenden</button>

Die Buttons sollen eine blaue Schrift und einen blauen Rahmen enthalten. Beim Darüberfahren mit der Maus soll sich der Hintergrund blau färben, die Schrift weiß. Das ist gleichzeitig auch die Vorgabe für den Primär-Button, den Absende-Button. Dieser ändert beim Darüberfahren mit der Maus die Hintergrundfarbe auf Dunkelblau.

In CSS kannst du die Buttons über ihren Elementselektor button oder über ihre gemeinsame Klasse .btn selektieren. Dem Absende-Button haben wir eine zweite Klasse .btn-primary gegeben, um ihn von dem Abbrechen-Button zu unterscheiden. Die ID #cancel-button des Abbrechen-Buttons wollen wir später mit JavaScript steuern, spielt für die Gestaltung allerdings keine Rolle.

Hier das CSS und das Ergebnis dazu:

.btn {
  border: 1px solid blue;
  background-color: transparent;
  color: blue;
}

.btn-primary, .btn:focus, .btn:hover {
  background-color: blue;
  color: white;
}

.btn-primary:focus, .btn-primary:hover {
  background-color: darkblue;
}

Merkhilfe: Bei einem Klassenselektor setzt du einen Punkt (.) vor den Klassennamen, bei einer ID das Rautezeichen (#) vor dessen Namen und bei Elementen nur dessen Elementnamen.

Kaskade

Cascading Style Sheets bedeutet übersetzt so viel wie „gestufte Gestaltungsbögen“. Der Begriff „Kaskade“ bezieht sich auf die hierarchische Abfolge von CSS-Regeln. Die Reihenfolge, in der diese Regeln definiert sind, bestimmt, welche Regel Vorrang hat. Man kann es sich wie bei einem Wasserfall vorstellen: Das Wasser beginnt mit wenig Kraft, wird aber immer stärker, je weiter es nach unten fließt. Daher gilt das Prinzip: Je weiter unten eine Regel definiert ist, desto stärker wirkt sie sich aus. Ein Beispiel:

div {
  background-color: red;
  color: white;
}

p, div, span {
  background-color: green;
}

In dem vorangegangenen Beispiel erhalten alle <div>-Elemente die Hintergrundfarbe Rot und die Schriftfarbe weiß. In der zweiten Regel erhalten gleich drei Elemente, durch Komma getrennt, die Hintergrundfarbe Grün. Durch die Kaskade gewinnt die zweite Regel, weil sie nach der ersten kommt. Die Schriftfarbe bleibt jedoch Weiß, da sie in der zweiten Regel nicht überschrieben wird.

Browservorgaben

Jeder Browser definiert darüber hinaus Standardstile für HTML-Elemente. Diese umfassen Dinge wie Schriftgröße, Schriftart, Farbe und Abstände. Die Mehrheit der Browser verwendet eine Standard-Schriftgröße von 16px auf das <body>-Element an und verwendet für Überschriften und Absätze eine Standard-Schriftart wie „sans-serif“ (Serifenschrift wie Times). Links sind standardmäßig blau und unterstrichen, besuchte Links sind lila. Nicht alle Browser verwenden die gleichen Vorgaben, doch grundsätzlich sieht eine vom Browser vorformatierte Seite so aus:

Die Standardstile werden ganz am Anfang des Dokuments angewendet, bevor deine eigenen CSS-Regeln zum Zuge kommen. Das bedeutet allerdings auch, dass du sie nachträglich überschreiben kannst.

Merkhilfe: Das, was als Letztes definiert wird, überschreibt das, was zuerst festgelegt wurde.

Vererbung

Eigenschaften lassen sich auch vererben. Ungefähr so, wenn die Tochter die Haarfarbe der Mutter bekommt oder der Sohn wie der Vater im Alter weiße statt graue Haare bekommt. Bei CSS übertragen sich Eigenschaften von übergeordneten Elementen auf untergeordnete Elemente. Wenn du also die Schriftfarbe im <body>-Element auf Schwarz setzt, wird diese Farbe auch auf alle darin enthaltenen Elemente angewendet, es sei denn, du überschreibst sie mit einer anderen Regel.

Auf Englisch heißt Vererbung „inheritance“ und diese lässt sich in zwei Kategorien unterteilen:

• Vererbbare Eigenschaften (Inherited Properties) erhalten die Eigenschaften von übergeordneten Elementen. Dazu gehören Schriftgröße (font-size), Schriftart (font-family), Schriftstärke (font-weight), Schriftfarbe (color), Textausrichtung (text-align), Zeilenhöhe (line-height) und Listenstil (list-style).
• Nicht vererbbare Eigenschaften (Non-Inherited Properties), die standardmäßig einen Initialwert erhalten, zum Beispiel vorgegeben vom Browser. Dazu gehören Breite (width), Höhe (height), Innenabstand (padding), Außenabstand (margin), Rahmen (border), Hintergrundfarbe (background-color), Anzeige (display) oder Position (position).

Merkhilfe: Auch in CSS erhalten die Kinder Eigenschaften der Eltern.

Spezifität

Die CSS-Spezifität ist der Algorithmus der Browser, die Gewichtung und Relevanz der Selektoren zu bestimmen, die Vorrang vor den anderen haben, die dasselbe HTML-Element ansprechen. Klingt komplizierter, als es ist. Stelle dir vor, jemand sucht in einem Raum voller Menschen nach einer Person. Unter „Liebe Studierende“ fühlen sich an der Uni möglicherweise alle angesprochen; von Lisa kann es mehrere geben, Lisa Kathrin Müller nur eine. In CSS ist es ähnlich: Je spezifischer ein Selektor ist, desto höher ist seine Spezifität.

Schauen wir uns das erst einmal an:

<div class="my-box" id="alert">Test</div>

div.my-box {
  background-color: yellow;
}

div#alert {
  background-color: red;
}

div {
  background-color: blue;
}

Was glaubst du, welche Farbe bekommt am Ende das div-Element? Laut der Kaskade müsste die Hintergrundfarbe Blau sein, richtig? Das, was zuletzt definiert wird, überschreibt das, was zuerst definiert wird. Oder?

Ja und Nein. Denn die Spezifität überwiegt die Reihenfolge. Stelle dir eine Drei-Punkte-Matrix vor, bei der die ID (zweites Beispiel im Code) den Wert 1-0-0 erhält, die Klasse (erstes Beispiel) den Wert 0-1-0 und der Elementseletor 0-0-1. Solltest du zwei Klassen haben, würde der Wert 0-2-0 betragen, bei einer ID und zwei Klassen wäre das 1-2-0. Die Spezifität wird durch die Summe der Werte bestimmt. Die ID hat also Vorrang vor der Klasse, die Klasse vor dem Element- oder Attributselektor.

Folglich ist die Box in Rot gehalten. Ohne die ID-Regel wäre sie gelb, da die Klasse spezifischer ist als der Elementselektor.

Das Ganze kannst du auch errechnen, doch einen Taschenrechner mit dir zu führen, ist nicht nötig. Denn zum einen habe ich dir unter /dokumentation#css die Dokumentation als auch einen Kalkulator verlinkt. Und zum anderen meine ich, dass du dir die Matrix überhaupt nicht merken musst. Wenn du verstanden hast, wo der Unterschied zwischen einer ID und einer Klasse besteht, kommst du einem Problem auch ohne Matrix auf die Spur.

Box-Modell

Das Box-Modell ist ein Konzept in CSS, das beschreibt, wie Elemente auf einer Webseite dargestellt werden. Jedes Element wird als Rechteck betrachtet, das aus vier Bereichen besteht: Inhalt (Content), Innenabstand (Padding), Rand (Border) und der Außenabstand zu anderen HTML-Elementen (Margin). Diese Bereiche sind voneinander getrennt und können mit CSS gestaltet werden.

Eine Box mit schwarzen Rand und einem Innenabstand zum Text könnte in CSS so aussehen:

.box {
  border: 1px solid black;
  border-radius: 0.5em;
  padding: 1em;
  margin: 1em;
  max-width: 200px;
}

Box-Sizing

Standardmäßig wird im Box-Modell die Breite und Höhe, die du einer Box gibst, nur auf den Inhalt angewendet. Die Innenabstände und Ränder werden hinzuaddiert. Bei einer Box mit einer Breite von 200px, einem Rand von 1px und einem Innenabstand von 10px ergibt sich eine Gesamtbreite von 222px.

Geregelt wird das durch die Eigenschaften box-sizing. Der Standardwert ist content-box, was bedeutet, dass die Innenabstände und Ränder der Breite hinzuaddiert werden. Mit border-box werden die Innenabstände und Ränder subtrahiert. Und das ist genau das, was wir wollen.

Möchtest du zwei Boxen nebeneinander platzieren, die sich die Breite zu 50% teilen, müsstest du von der Breite zuvor die Ränder und Abstände abziehen, damit sie auch nebeneinander passen. Setzt du das box-sizing auf border-box, musst du das nicht mehr machen.

Hier noch einmal eine Beispielrechnung:

/* 200 + 10 + 10 + 1 + 1 = 222 */
/* Inhalt: 200px, Gesamt: 222px */
.box {
  box-sizing: content-box;
  width: 200px;
  padding: 10px;
  border: 1px solid black;
}

/* 200 - 10 - 10 - 1 - 1 = 178 */
/* Inhalt: 178px, Gesamt: 200px */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 1px solid black;
}

Du kannst und solltest alle HTML-Elemente auf einer Seite immer auf border-box umstellen. Das geht mit dem Sternselektor *, der alle Elemente auf der Website selektiert, und einer universellen Regel:

*, *::before, *::after {
  box-sizing: border-box;
}

Mit dem Interactive Box-Model Diagram kannst du das Box-Modell interaktiv erkunden.

Übung

Viel Theorie bis jetzt, richtig? Kommen wir also zur Praxis, damit du das Gelernte auch anwenden kannst. Die oben abgebildete Website mit den Standardstilen habe ich auf einer Plattform CodePen zur Verfügung gestellt. Dort kannst du HTML und CSS direkt online bearbeiten.

Hier ein paar Vorschläge:

• Ändere im body die Schriftgröße (font-size: 18px;) und Farbe (color: red;) und beobachte, wie sich das auf alle anderen Elemente auswirkt.
• Kopiere dir den Code aus dem Abschnitt Spezifität und ändere die Reihenfolge der Regeln, entferne ID und/oder Klasse vom HTML-Element. Welche Hintergrundfarbe wird angezeigt?
• Kopiere dir HTML und CSS aus dem Abschnitt Selektoren und baue die Buttons nach.

Zur Übung

Wenn das alles funktioniert, hast du die Grundlagen von CSS verstanden. Herzlichen Glückwunsch! 🎉

Du kannst jetzt mit dem Styling deiner eigenen Website beginnen.

• Verwendete Tags:
• css
• html