CSS mit Adi Prinz

CSS-Basic / Erste Schritte

CSS steht für Cascading Style Sheets und ist eine Gestaltungs- und Formatierungssprache für HTML-Dokumente. Mit CSS lassen sich unter anderem Farben, Schriftarten, Abstände, Größen und das Layout einer Webseite festlegen.

CSS wird ständig weiterentwickelt. Dabei gibt es heute keine einheitliche aktuelle CSS-Version mehr. Stattdessen besteht CSS aus verschiedenen Modulen, die unabhängig voneinander weiterentwickelt werden.

Für CSS ist keine zusätzliche Dokumenttypdeklaration erforderlich. In einem modernen HTML-Dokument wird weiterhin die HTML-Dokumenttypdeklaration verwendet:

<!DOCTYPE html>

Was muss ich wissen?

Grundkenntnisse in HTML sind hilfreich, da CSS verwendet wird, um HTML-Elemente zu gestalten. Außerdem benötigen Sie einen Text- oder Code-Editor und einen aktuellen Webbrowser.

Wohin schreibe ich CSS?

Grundsätzlich gibt es drei Möglichkeiten, CSS-Code zu notieren:

Inline-CSS – direkt im HTML-Element mit dem Attribut style
Internes CSS – im style-Element innerhalb des head
Externes CSS – in einer separaten CSS-Datei

Inline-CSS

Mit dem Attribut style können CSS-Deklarationen direkt auf ein einzelnes HTML-Element angewendet werden. Die CSS-Anweisungen gelten nur für dieses Element.

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

Inline-CSS eignet sich für kleine Tests oder einzelne Ausnahmen. Bei größeren Webseiten sollte es jedoch nur sparsam verwendet werden, da Inhalt und Gestaltung direkt miteinander vermischt werden.

Internes CSS

Internes CSS wird in einem style-Element innerhalb des head-Bereichs eines HTML-Dokuments notiert. Die Regeln gelten für das gesamte aktuelle HTML-Dokument.

<head>
  <style>
    h1 {
      color: green;
    }

    h2 {
      color: blue;
    }

    p {
      color: red;
      font-size: 1.2rem;
    }
  </style>
</head>

Externes CSS

CSS-Anweisungen können auch in einer externen Datei gespeichert werden. Eine solche Datei wird als Stylesheet bezeichnet und besitzt die Dateiendung .css, zum Beispiel style.css.

Die CSS-Datei wird mit dem link-Element im head-Bereich des HTML-Dokuments eingebunden:

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

Innerhalb der externen CSS-Datei werden nur die CSS-Regeln notiert. Ein zusätzliches style-Element ist dort nicht erforderlich.

h1 {
  color: green;
}

h2 {
  color: blue;
}

p {
  color: red;
  font-size: 1.2rem;
}

Merke:
Für größere Webseiten sollten CSS-Regeln vorzugsweise in einer externen CSS-Datei gespeichert werden. Dadurch bleiben HTML und Gestaltung übersichtlich voneinander getrennt.

Es können auch mehrere Stylesheets in ein HTML-Dokument eingebunden werden.

<link rel="stylesheet" href="stylesheets/basic.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/navigation.css">

Auch für die Gestaltung von Webseiten gibt es grafische Programme und Content-Management-Systeme. Dazu gehören beispielsweise Adobe Dreamweaver, Joomla oder TYPO3. Diese Themen werden in diesem Script nicht behandelt.

Die Syntax von CSS

Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock. Der Deklarationsblock wird innerhalb eines geschweiften Klammernpaares notiert.

Selektor { Deklarationsblock }

Der Selektor bestimmt, welche HTML-Elemente gestaltet werden. Der Deklarationsblock enthält eine oder mehrere CSS-Deklarationen.

p {
  color: blue;
  font-size: 1.2rem;
}

In diesem Beispiel ist p der Selektor. Die Angaben color: blue; und font-size: 1.2rem; sind die Deklarationen.

Bei Inline-CSS ist kein Selektor erforderlich, da die Deklarationen direkt im jeweiligen HTML-Element stehen. Auch die geschweiften Klammern entfallen.

Der Selektor

Der CSS-Selektor steht vor dem Deklarationsblock und bestimmt, auf welche HTML-Elemente die CSS-Deklarationen angewendet werden.

CSS bietet eine große Anzahl unterschiedlicher Selektoren. Zunächst werden die wichtigsten Grundformen behandelt.

Typselektoren

Ein Typselektor wählt alle Elemente eines bestimmten HTML-Elementtyps aus.

p { Deklarationsblock }

Mehrere Selektoren können mit einem Komma zu einer Selektorliste zusammengefasst werden.

h1, h2, h3 { Deklarationsblock }

h1,
h2,
h3 {
  color: darkblue;
}

Klassenselektoren

Mit einem Klassenselektor werden alle HTML-Elemente ausgewählt, die eine bestimmte Klasse besitzen. Vor dem Klassennamen steht ein Punkt.

.myclass { Deklarationsblock }

.hinweis {
  background-color: lightyellow;
  padding: 1rem;
}

Die entsprechende Klasse wird im HTML-Dokument mit dem Attribut class zugewiesen:

<p class="hinweis">
  Das ist ein Hinweis.
</p>

ID-Selektoren

Mit einem ID-Selektor wird ein HTML-Element anhand seiner ID ausgewählt. Vor dem ID-Namen steht ein Rautensymbol.

#myID { Deklarationsblock }

#header {
  background-color: lightgray;
}

Die entsprechende ID wird im HTML-Dokument mit dem Attribut id vergeben:

<header id="header">
  Inhalt des Headers
</header>

Hinweis:
Eine ID sollte innerhalb eines HTML-Dokuments nur einmal vorkommen. Für wiederverwendbare Gestaltungen werden meistens Klassen verwendet.

Nachfahrenselektoren

Ein Nachfahrenselektor wählt Elemente aus, die sich innerhalb eines anderen Elements befinden.

div p { Deklarationsblock }

Der Selektor div p wählt alle p-Elemente aus, die sich irgendwo innerhalb eines div-Elements befinden.

div p {
  color: darkred;
}

Weiterführende Informationen zu CSS-Selektoren finden Sie unter folgenden Links:

SELFHTML: CSS-Selektoren
w3schools: CSS-Selektoren
Offizielle Dokumentation: CSS-Selektoren (MDN)

Der Deklarationsblock

Ein Deklarationsblock enthält eine oder mehrere Deklarationen. Jede Deklaration besteht aus einer Eigenschaft und einem zugehörigen Wert.

Selektor { Eigenschaft: Wert; }

Eigenschaft und Wert werden durch einen Doppelpunkt getrennt. Mehrere Deklarationen werden durch Semikolons voneinander getrennt.

p {
  color: blue;
  font-size: 1.2rem;
  line-height: 1.5;
}

Das Semikolon nach der letzten Deklaration ist nicht zwingend erforderlich. Es sollte dennoch gesetzt werden, da später leichter weitere Deklarationen ergänzt werden können.

Merke:
Eine CSS-Deklaration besteht immer aus einer Eigenschaft, einem Doppelpunkt und einem Wert.

CSS direkt im HTML-Element

Beim Inline-CSS werden die Deklarationen direkt in das Attribut style geschrieben. Ein Selektor und geschweifte Klammern sind nicht erforderlich.

<p style="color: blue;">
  Blauer Text
</p>

<p style="color: blue; font-size: 1.2rem;">
  Blauer und größerer Text
</p>

CSS im style-Element

Internes CSS wird innerhalb eines style-Elements im head-Bereich geschrieben.

<head>
  <style>
    h1 {
      color: green;
    }

    h2 {
      color: blue;
    }

    p {
      color: red;
      font-size: 1.2rem;
    }
  </style>
</head>

CSS in einer externen Datei

Eine externe CSS-Datei wird mit dem link-Element in das HTML-Dokument eingebunden.

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

Die Syntax innerhalb einer externen CSS-Datei entspricht der Syntax im style-Element. Das style-Element selbst wird jedoch nicht in die CSS-Datei geschrieben.

h1 {
  color: green;
}

h2 {
  color: blue;
}

p {
  color: red;
  font-size: 1.2rem;
}

Es können mehrere Stylesheets in ein HTML-Dokument eingebunden werden. Die Reihenfolge kann dabei eine Rolle spielen, da später geladene Regeln frühere Regeln überschreiben können.

<link rel="stylesheet" href="stylesheets/basic.css">
<link rel="stylesheet" href="stylesheets/layout.css">

Kommentare in CSS

Kommentare können verwendet werden, um CSS-Code zu erklären oder einzelne Bereiche eines Stylesheets zu kennzeichnen.

Ein CSS-Kommentar beginnt mit den Zeichen /* und endet mit */. Kommentare können einzeilig oder mehrzeilig sein.

Einzeiliger Kommentar

/* Das ist ein Kommentar. */

p {
  color: red;
}

Mehrzeiliger Kommentar

/*
  Dieser Kommentar
  besteht aus mehreren Zeilen.
*/

p {
  color: red;
  font-size: 1.2rem;
}

Merke:
CSS-Kommentare können nicht ineinander verschachtelt werden.

CSS-Variablen (Custom Properties)

Grundlagen

CSS-Variablen werden auch Custom Properties genannt. Mit ihnen können häufig verwendete Werte zentral gespeichert und an mehreren Stellen im Stylesheet wiederverwendet werden. Das erleichtert spätere Änderungen und sorgt für ein einheitliches Design.

Der Name einer CSS-Variablen beginnt immer mit zwei Bindestrichen. Bei der Benennung sollte auf eine verständliche und aussagekräftige Bezeichnung geachtet werden.

--primary-color: #0d6efd;
--text-color: #333;
--spacing-large: 2rem;

CSS-Variablen können grundsätzlich innerhalb jedes Selektors definiert werden. Häufig werden globale Variablen im Selektor :root angelegt.

Der Selektor :root

Der Selektor :root bezeichnet das oberste Element eines Dokuments. In einem HTML-Dokument entspricht das dem Element <html>.

In :root definierte CSS-Variablen stehen im gesamten Dokument zur Verfügung. Deshalb eignet sich dieser Selektor besonders gut für zentrale Farben, Abstände, Schriftgrößen und andere wiederkehrende Werte.

:root {
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
  --text-color: #333;
  --background-color: #fff;
  --spacing: 1rem;
}

CSS-Variablen mit var() verwenden

Mit der Funktion var() wird der gespeicherte Wert einer CSS-Variablen abgerufen. Der Variablenname wird innerhalb der Klammern angegeben.

body {
  color: var(--text-color);
  background-color: var(--background-color);
}

button {
  padding: var(--spacing);
  color: #fff;
  background-color: var(--primary-color);
}

Wird der Wert einer Variablen in :root geändert, wirkt sich diese Änderung auf alle Deklarationen aus, welche die Variable verwenden.

:root {
  --primary-color: darkgreen;
}

Einen Fallback-Wert festlegen

Die Funktion var() kann zusätzlich einen Ersatzwert enthalten. Dieser sogenannte Fallback-Wert wird verwendet, wenn die angegebene Variable nicht definiert ist.

p {
  color: var(--text-color, #333);
}

In diesem Beispiel wird #333 verwendet, falls die Variable --text-color nicht vorhanden ist.

Globale und lokale CSS-Variablen

Variablen in :root sind global verfügbar. Eine Variable kann aber auch nur innerhalb eines bestimmten Elements definiert oder dort überschrieben werden.

:root {
  --card-color: #f1f1f1;
}

.warning {
  --card-color: #ffe5e5;
}

.card {
  background-color: var(--card-color);
}

Eine Karte mit der zusätzlichen Klasse warning verwendet den lokal überschriebenen Wert. Alle anderen Karten verwenden weiterhin den globalen Wert aus :root.

<div class="card">Normale Karte</div>
<div class="card warning">Warnhinweis</div>

Vorteile von CSS-Variablen

Wiederkehrende Werte müssen nur einmal definiert werden.
Farben, Abstände und Schriftgrößen lassen sich zentral ändern.
Stylesheets werden übersichtlicher und leichter zu warten.
Variablen können innerhalb bestimmter Elemente überschrieben werden.
Sie eignen sich beispielsweise für Farbthemen wie Light Mode und Dark Mode.

CSS-Basic

CSS Module

css mit Adi Prinz