4. Unterrichtsblock

CSS Logo

Inhaltsverzeichnis

CSS Grundlagen

  • CSS ist die Sprache, die verwendet wird, um ein HTML-Dokument zu formatieren und zu gestalten.
  • CSS beschreibt, wie HTML-Elemente dargestellt werden sollen.
  • CSS steht für Cascading Style Sheets
  • CSS beschreibt, wie HTML-Elemente auf Bildschirm oder in anderen Medien dargestellt werden sollen
  • CSS spart viel Arbeit. Es kann das Layout mehrerer Webseiten gleichzeitig steuern
  • Externe Stylesheets werden in CSS-Dateien gespeichert
body { 
  background-color: lightblue;
}

h1 { 
  color: white;
  text-align: center;
}

p { 
  font-family: verdana;
  font-size: 20px;
}

CSS Syntax

Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock.
Die Deklarationsblöcke werden innerhalb von geschweiften Klammern geschrieben und bestehen aus Eigenschaften, welche einen Wert zugewiesen bekommen.
Ein Selektor kann somit mehrere Deklarationsblöcke enthalten.

/*
Mehrzeiliger 
Kommentar
*/

/* Beispiel */
p {font-size: 15px; color: #333333;}

/* Erklärung */
p {                  /* Selektor (p) und öffnende, geschweifte Klammer */
  font-size: 15px;   /* Deklaration - bestehend aus der Eigenschaft (font-size) und dem Wert (15px) */
  color: #333333;    /* Deklarationen enthalten nach der Eigenschaft einen Doppelpunkt : und am Ende ein Semikolon ; */
}                    /* Schließende, geschweifte Klammer */
  • Der Selektor zeigt auf das HTML-Element, das formatiert werden soll.
  • Der Deklarationsblock enthält eine oder mehrere durch Semikolon getrennte Deklarationen.
  • Jede Deklaration enthält einen CSS-Eigenschaftsnamen und einen Wert, getrennt durch einen Doppelpunkt.
  • Mehrere CSS-Deklarationen werden durch Semikolons getrennt und Deklarationsblöcke werden von geschweiften Klammern umgeben.

Weiteres Beispiel

In diesem Beispiel werden alle <p>-Elemente zentriert ausgerichtet und rot dargestellt:

p {
  color: red;
  text-align: center;
}

Erklärung

  • p ist ein Selektor in CSS (er zeigt auf das HTML-Element, das Sie formatieren möchten: <p>).
  • color ist eine Eigenschaft und red ist der Wert der Eigenschaft
  • text-align ist eine Eigenschaft und center ist der Eigenschaftswert

Aufgabe

1. Grundlegende Formatierungen anwenden

Erstelle ein HTML‑Dokument und wende folgende CSS‑Regeln an:

  • Hintergrundfarbe der Seite ändern
  • Überschrift farbig und zentriert gestalten
  • Absatzschriftart und Schriftgröße anpassen

2. Eigene Selektoren ausprobieren

Füge weitere HTML‑Elemente hinzu und style sie:

  • <h2> mit anderer Farbe
  • <ul> oder <ol> mit verändertem Abstand
  • <a>‑Links mit eigener Farbe und Hover‑Effekt

3. Mehrere Deklarationen kombinieren

Erstelle eine CSS‑Regel mit mindestens drei Eigenschaften, z. B.:

  • Farbe
  • Schriftgröße
  • Rand (border)
  • Innenabstand (padding)

CSS Einbindung

Wenn ein Browser ein Stylesheet liest, formatiert er das HTML-Dokument gemäß den Informationen im Stylesheet.

Drei Möglichkeiten zum Einfügen von CSS

Externes CSS

Mit einem externen Stylesheet kann man das Aussehen einer gesamten Website ändern, indem man nur eine Datei ändert!
Jede HTML-Seite muss einen Verweis auf die externe Stylesheet-Datei innerhalb des <link>-Elements innerhalb des Head-Abschnitts enthalten.

Externe Stile werden innerhalb des <link>-Elements innerhalb des <head>-Abschnitts einer HTML-Seite definiert:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="meinstil.css">
  </head>
  <body>
    <h1>Das ist eine Überschrift</h1>
    <p>Das ist ein Satz.</p>
  </body>
</html>

Das ist eine Überschrift

Das ist ein Satz.

Ein externes Stylesheet kann in jedem Texteditor geschrieben werden und muss mit der Erweiterung .css gespeichert werden.
Die externe .css-Datei sollte keine HTML-Tags enthalten.

So sieht die Datei „meinstil.css“ für o. g. Beispiel aus:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Hinweis: Es darf kein Leerzeichen zwischen dem Eigenschaftswert und der Einheit eingefügt werden:
Falsch (Leerzeichen): margin-left: 20 px;
Richtig (kein Leerzeichen): margin-left: 20px;

Internes CSS

Ein internes Stylesheet kann verwendet werden, wenn eine einzelne HTML-Seite einen einzigartigen Stil hat.
Der interne Stil wird innerhalb des <style>-Elements innerhalb des Head-Abschnitts definiert.

Interne Stile werden innerhalb des <style>-Elements innerhalb des <head>-Abschnitts einer HTML-Seite definiert:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: linen;
      }

      h1 {
        color: maroon;
        margin-left: 40px;
      }
    </style>
  </head>
  <body>
    <h1>Das ist eine Überschrift</h1>
    <p>Das ist ein Satz</p>
  </body>
</html>

Das ist eine Überschrift

Das ist ein Satz

Inline-CSS

Ein Inline-Stil kann verwendet werden, um einen einzigartigen Stil für ein einzelnes Element anzuwenden.
Um Inline-Stile zu verwenden, fügt man dem relevanten Element das style-Attribut hinzu. Das style-Attribut kann eine beliebige CSS-Eigenschaft enthalten.

Inline-Stile werden innerhalb des „style„-Attributs des relevanten Elements definiert:

<!DOCTYPE html>
<html>
  <body>

    <h1 style="color: blue; text-align: center;">Das ist eine Überschrift</h1>
    <p style="color: red;">Das ist ein Satz.</p>

  </body>
</html>

Das ist eine Überschrift

Das ist ein Satz

Tipp: Ein Inline-Style verliert viele der Vorteile eines Stylesheets. Diese Methode sollte daher nur sparsam eingesetzt werden.

Mehrere Stylesheets

Wenn einige Eigenschaften für denselben Selektor (Element) in verschiedenen Stylesheets definiert wurden, wird der Wert aus dem zuletzt gelesenen Stylesheet verwendet. 

Angenommen, ein externes Stylesheet hat den folgenden Stil für das Element <h1>:

h1 {
  color: navy;
}

Weiter wird angenommen, dass ein internes Stylesheet ebenfalls einen Stil für das Element <h1> hat:

h1 {
  color: orange;   
}

Wenn der interne Stil nach dem Link zum externen Stylesheet definiert wird, sind die <h1>-Elemente „orange“:

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <style>
    h1 {
      color: orange;
    }
  </style>
</head>

Beispiel

Wenn jedoch der interne Stil vor dem Link zum externen Stylesheet definiert wird, sind die <h1>-Elemente „navy“: 

<head>
  <style>
    h1 {
      color: orange;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Kaskadierende Reihenfolge

Welcher Stil wird verwendet, wenn für ein HTML-Element mehr als ein Stil angegeben ist?

Alle Stile auf einer Seite werden nach den folgenden Regeln in ein neues „virtuelles“ Stylesheet „kaskadiert“, wobei Nummer eins die höchste Priorität hat:

  1. Inline-Stil (innerhalb eines HTML-Elements)
  2. Externe und interne Stylesheets (im Head-Bereich)
  3. Browser-Standard

Ein Inline-Stil hat also die höchste Priorität und überschreibt externe und interne Stile und Browser-Standardwerte.

Aufgabe

Teil 1 — Externes Stylesheet einbinden

Erstelle zwei Dateien:

  • index.html
  • style.css

Führe folgende Schritte aus:

  • Binde die CSS‑Datei mit <link> im <head> ein
  • Style mindestens drei Elemente (z. B. body, h1, p)
  • Ändere anschließend nur die CSS‑Datei und beobachte, wie sich die HTML‑Seite verändert

Ziel: Verständnis für externe Stylesheets und Trennung von Struktur & Design.

Teil 2 — Internes Stylesheet verwenden

Erstelle ein HTML‑Dokument, das:

  • im <head> ein <style>‑Element enthält
  • mindestens zwei Elemente formatiert (z. B. Hintergrundfarbe, Textfarbe, Abstände)

Vergleiche anschließend:

  • Was fühlt sich übersichtlicher an: extern oder intern?

Ziel: Unterschiede zwischen interner und externer Einbindung erkennen.

Teil 3 — Inline‑CSS ausprobieren

Füge Inline‑Styles zu einzelnen Elementen hinzu, z. B.:

<h1 style="color: blue; text-align: center;">Titel</h1>
<p style="color: red;">Text</p>

Beobachte:

  • Wie wirkt sich Inline‑CSS auf die Übersichtlichkeit aus?
  • Was passiert, wenn du denselben Stil zusätzlich im Stylesheet definierst?

Ziel: Inline‑CSS verstehen und seine Nachteile erkennen.

Teil 4 — Reihenfolge testen (Kaskadierung)

Erstelle ein HTML‑Dokument mit:

  • einem externen Stylesheet
  • einem internen Stylesheet
  • einem Inline‑Style

Definiere für dasselbe Element (h1) jeweils unterschiedliche Farben.

Beobachte:

  • Welche Farbe gewinnt?
  • Ändere die Reihenfolge der <style>‑ und <link>‑Elemente und teste erneut.

Ziel: Die CSS‑Kaskade praktisch verstehen.

Teil 5 — Fehleranalyse

Baue bewusst typische Fehler ein:

  • 20 px statt 20px
  • fehlendes Semikolon
  • fehlende geschweifte Klammer

Lass dir im Browser anzeigen, was passiert.

Ziel: CSS‑Fehler erkennen und debuggen.

CSS-Selektoren

Ein CSS-Selektor wählt die HTML-Elemente aus, die formatiert werden sollen.

Man kann CSS-Selektoren in fünf Kategorien einteilen:

  • Einfache Selektoren (wählt Elemente basierend auf Name, ID, Klasse aus)
    • Alle der hier folgenden Selektoren sind Teil der einfachen Selektoren
  • Kombinator-Selektoren (Wählt Elemente basierend auf einer bestimmten Beziehung zwischen ihnen aus)
  • Pseudo-Klassen-Selektoren (Wählt Elemente basierend auf einem bestimmten Zustand aus)
  • Pseudo-Element-Selektoren (Wählt und formatiert einen Teil eines Elements)
  • Attributselektoren (Wählt Elemente basierend auf einem Attribut oder Attributwert aus)

Das CSS-Element Selektor (einfacher Selektor)

Der Elementselektor wählt HTML-Elemente basierend auf dem Elementnamen aus.

Hier werden alle <p>-Elemente auf der Seite zentriert ausgerichtet, mit einer roten Textfarbe: 

p {
  text-align: center;
  color: red;
}

Der CSS-ID-Selektor (einfacher Selektor)

Der id-Selektor verwendet das id-Attribut eines HTML-Elements, um ein bestimmtes Element auszuwählen.
Die ID eines Elements ist innerhalb einer Seite einzigartig, daher wird der ID-Selektor verwendet, um ein einzelnes Element auszuwählen!

Um ein Element mit einer bestimmten ID auszuwählen, schreibt man ein Rautezeichen (#), gefolgt von der ID des Elements.

Die folgende CSS-Regel wird auf das HTML-Element mit id="newsletter" angewendet: 

#newsletter {
  text-align: center;
  color: red;
}

Hinweis: Ein ID-Name darf nicht mit einer Zahl beginnen!

Der CSS-Klassen Selektor (einfacher Selektor)

Der Klassenselektor wählt HTML-Elemente mit einem bestimmten Klassenattribut aus.
Um Elemente mit einer bestimmten Klasse auszuwählen, schreibt man einen Punkt (.) gefolgt vom Klassennamen.

In diesem Beispiel werden alle HTML-Elemente mit class="mittig" rot und zentriert ausgerichtet: 

.mittig {
  text-align: center;
  color: red;
}

Man kann auch angeben, dass nur bestimmte HTML-Elemente von einer Klasse betroffen sein sollen. In diesem Beispiel sind nur <p>-Elemente mit class="mittig" rot und zentriert: 

p.mittig {
  text-align: center;
  color: red;
}

HTML-Elemente können auch auf mehr als eine Klasse verweisen. In diesem Beispiel wird das Element <p> entsprechend class="mittig" und class="vollbreite" gestaltet: 

<p class="mittig vollbreite">Dieser Satz referenziert zwei Klassen.</p>

Hinweis: Ein Klassenname darf nicht mit einer Zahl beginnen!

Der CSS-Universalselektor (einfacher Selektor)

Der Universalselektor (*) selektiert alle HTML-Elemente auf der Seite. Die folgende CSS-Regel wirkt sich auf jedes HTML-Element auf der Seite aus: 

* {
  text-align: center;
  color: blue;
}

Der CSS-Gruppierungsselektor (einfacher Selektor)

Für einen Gruppierungsselektor wählt man alle HTML-Elemente mit denselben Stildefinitionen aus und weist der gesamten Gruppe diesen Stil zu.

/*
Als Beispiel dient folgender Code
Die Elemente h1, h2 und p haben dieselben Stildefinitionen.
*/

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

/*
Stattdessen kann man sparsamer schreiben.
Um Selektoren zu gruppieren, trennt man jeden Selektor durch ein Komma.
*/

h1, h2, p {
  text-align: center;
  color: red;
}

Aufgabe

Teil 1 — HTML‑Grundstruktur erstellen

Erstelle eine Datei index.html mit folgendem Inhalt (oder ähnlich):

html

<h1 id="haupttitel">Willkommen!</h1>

<h2 class="untertitel">Unterüberschrift</h2>

<p>Ein normaler Absatz.</p>
<p class="info">Ein Absatz mit einer Klasse.</p>

<div class="box vollbreite">Ein Div‑Element mit zwei Klassen.</div>

<span>Ein kleines Inline‑Element.</span>

Teil 2 — CSS‑Selektoren ausprobieren

Erstelle eine Datei style.css und wende folgende Selektoren an:

1. Elementselektor

Style alle <p>‑Elemente:

p {
  color: red;
}

2. ID‑Selektor

Style nur das Element mit id="haupttitel":

#haupttitel {
  color: blue;
  text-align: center;
}

3. Klassenselektor

Style alle Elemente mit class="info":

.info {
  font-weight: bold;
  color: green;
}

4. Kombinierter Element‑und‑Klassenselektor

Style nur <p>‑Elemente mit der Klasse info:

p.info {
  font-size: 20px;
}

5. Mehrere Klassen gleichzeitig

Style Elemente, die sowohl box als auch vollbreite besitzen:

.box.vollbreite {
  background-color: lightgray;
  padding: 10px;
}

6. Universalselektor

Wende eine Regel auf alle Elemente an:

* {
  margin-bottom: 10px;
}

7. Gruppierungsselektor

Gib mehreren Elementen denselben Stil:

h1, h2, p {
  text-align: center;
}

Teil 3 — Reflexion

Beantworte für dich:

  • Welche Selektoren würdest du im echten Projekt bevorzugen — und warum?
  • Welcher Selektor wirkt am breitesten?
  • Welcher Selektor wirkt am spezifischsten?