🎨 CSS-Gestaltung

Webseiten gestalten und übersichtlicher machen

Einstieg: Worum geht es in diesem Kapitel?

Im ersten Kapitel hast du HTML als Struktur einer Webseite kennengelernt. HTML beschreibt, welche Inhalte auf einer Webseite vorkommen und welche Bedeutung sie haben: Überschrift, Absatz, Liste, Link, Bild, Tabelle oder Bereich.

Eine HTML-Seite kann dadurch bereits sinnvoll aufgebaut sein. Trotzdem wirkt sie ohne Gestaltung oft sehr schlicht. Genau hier kommt CSS ins Spiel.

CSS steht für Cascading Style Sheets. Mit CSS legst du fest, wie HTML-Elemente dargestellt werden. Du kannst zum Beispiel Farben, Schriftgrößen, Abstände, Rahmen, Hintergründe und einfache Layouts verändern.

Merksatz

HTML strukturiert Inhalte. CSS gestaltet ihre Darstellung.

In diesem Kapitel lernst du CSS in drei Schritten kennen:

1. CSS direkt im HTML-Element mit style
2. CSS gesammelt im <style>-Bereich im head
3. CSS in einer eigenen Datei style.css

Diese Reihenfolge ist bewusst gewählt. Zuerst siehst du direkt am Element, was eine CSS-Regel bewirkt. Danach lernst du, wie man Gestaltung übersichtlicher und professioneller organisiert.

Ausgangspunkt: Deine HTML-Seite

Du arbeitest weiter mit deinem Ordner aus dem ersten Kapitel:

html-einstieg/
├─ index.html
└─ images/

Öffne deine Datei index.html wieder mit Notepad++.

Deine Seite sollte bereits eine sinnvolle HTML-Struktur haben, zum Beispiel mit Überschriften, Absätzen, Listen, einem Link, einer Tabelle und vielleicht einem Bild.

Hinweis

Wenn deine Seite anders aussieht, ist das in Ordnung. Wichtig ist, dass du mit einer echten HTML-Struktur arbeitest und nicht nur mit unformatiertem Text.

CSS direkt im Element

Das style-Attribut

Die einfachste Möglichkeit, CSS auszuprobieren, ist das style-Attribut direkt im HTML-Element.

Beispiel:

<h1 style="color: blue;">Informatik ist überall</h1>

Hier bekommt genau diese eine Überschrift die Farbe Blau.

Das CSS steht innerhalb des öffnenden Tags:

style="color: blue;"

Dabei ist color die Eigenschaft und blue der Wert.

color: blue;

Die Eigenschaft sagt, was verändert wird. Der Wert sagt, wie es verändert wird.

Merksatz

Eine CSS-Anweisung besteht meist aus Eigenschaft, Doppelpunkt, Wert und Strichpunkt.

Mehrere CSS-Eigenschaften

Du kannst mehrere Eigenschaften im selben style-Attribut verwenden:

<h1 style="color: darkblue; font-size: 36px; text-align: center;">
  Informatik ist überall
</h1>

Jede CSS-Anweisung endet mit einem Strichpunkt:

color: darkblue;
font-size: 36px;
text-align: center;

Häufiger Fehler

Wenn ein Strichpunkt fehlt, funktioniert manchmal trotzdem noch etwas. Bei mehreren Eigenschaften kann es aber schnell zu unerwarteten Ergebnissen kommen.

Wichtige CSS-Eigenschaften

Textfarbe: color

Mit color veränderst du die Textfarbe.

<p style="color: green;">
  Dieser Absatz ist grün.
</p>

Hintergrundfarbe: background-color

Mit background-color veränderst du die Hintergrundfarbe eines Elements.

<p style="background-color: lightyellow;">
  Dieser Absatz hat einen hellgelben Hintergrund.
</p>

Schriftgröße: font-size

Mit font-size veränderst du die Schriftgröße.

<p style="font-size: 20px;">
  Dieser Text ist größer als normaler Text.
</p>

px steht für Pixel. Pixel sind eine Maßeinheit am Bildschirm.

Schriftart: font-family

Mit font-family legst du die Schriftart fest.

<p style="font-family: Arial, sans-serif;">
  Dieser Text verwendet Arial oder eine ähnliche serifenlose Schrift.
</p>

Bei font-family gibt man oft mehrere Schriftarten an. Wenn die erste nicht verfügbar ist, kann der Browser eine andere verwenden.

Textausrichtung: text-align

Mit text-align richtest du Text aus.

<h1 style="text-align: center;">
  Zentrierte Überschrift
</h1>

Mögliche Werte sind zum Beispiel:

left
center
right

Rahmen: border

Mit border erzeugst du einen Rahmen.

<p style="border: 2px solid black;">
  Dieser Absatz hat einen Rahmen.
</p>

Ein Rahmen besteht häufig aus Breite, Art und Farbe:

border: 2px solid black;

Innen- und Außenabstand: padding und margin

Mit padding erzeugst du Abstand innerhalb eines Elements, also zwischen Inhalt und Rahmen.

<p style="border: 2px solid black; padding: 10px;">
  Dieser Absatz hat Abstand zwischen Text und Rahmen.
</p>

Mit margin erzeugst du Abstand außerhalb eines Elements, also zwischen diesem Element und anderen Elementen.

<p style="margin: 30px;">
  Dieser Absatz hat Abstand zu anderen Elementen.
</p>

Breite: width und max-width

Mit width kannst du eine feste Breite festlegen.

<p style="width: 400px;">
  Dieser Absatz ist 400 Pixel breit.
</p>

Mit max-width legst du eine maximale Breite fest. Das ist oft flexibler:

<p style="max-width: 700px;">
  Dieser Absatz wird nicht breiter als 700 Pixel.
</p>

Gerade für Webseiten ist max-width häufig sinnvoller als eine fixe Breite.

Farben in CSS

CSS kennt Farbnamen:

<h2 style="color: red;">Rote Überschrift</h2>

CSS kann aber auch Hex-Codes verwenden:

<h2 style="color: #3366cc;">Blaue Überschrift</h2>

Oder RGB-Werte:

<h2 style="color: rgb(51, 102, 204);">Blaue Überschrift</h2>

Für den Anfang reichen Farbnamen und einfache Hex-Codes völlig aus.

Color Picker

Wenn du Farben ausprobieren möchtest, kannst du einen Color Picker verwenden:

Color Picker für HTML/CSS

CSS im <style>-Bereich

Warum nicht alles direkt im Element?

Inline-CSS ist für den Einstieg hilfreich, weil du direkt siehst, welches Element gestaltet wird. Bei größeren Seiten wird es aber schnell mühsam.

Stell dir vor, du möchtest alle Absätze gleich gestalten. Dann müsstest du bei jedem Absatz wieder dieselben CSS-Anweisungen schreiben:

<p style="font-size: 18px; line-height: 1.5;">
  Erster Absatz.
</p>

<p style="font-size: 18px; line-height: 1.5;">
  Zweiter Absatz.
</p>

Das funktioniert, ist aber schlecht wartbar. Wenn du später die Schriftgröße ändern möchtest, musst du sie an vielen Stellen ändern.

Merksatz

Inline-CSS ist gut zum Ausprobieren. Für wiederkehrende Gestaltung ist es unpraktisch.

CSS gesammelt im head

Wenn mehrere Elemente gleich gestaltet werden sollen, ist es sinnvoller, CSS gesammelt im head zu schreiben.

Dazu verwendest du das <style>-Element:

<head>
  <title>Informatik ist überall</title>

  <style>
    h1 {
      color: darkblue;
      text-align: center;
    }

    p {
      font-size: 18px;
      line-height: 1.5;
    }
  </style>
</head>

Jetzt gilt die Regel für alle passenden Elemente auf dieser Seite.

Aufbau einer CSS-Regel

Eine CSS-Regel besteht aus:

selektor {
  eigenschaft: wert;
}

Beispiel:

p {
  color: black;
  font-size: 18px;
}

Der Selektor sagt, welche HTML-Elemente gestaltet werden. Die Eigenschaften sagen, was verändert wird. Die Werte sagen, wie es verändert wird.

Merksatz

Der Selektor wählt aus. Die Eigenschaften gestalten.

Tag-Selektoren

Wenn du direkt den Namen eines HTML-Tags verwendest, spricht man von einem Tag-Selektor.

h1 {
  color: darkblue;
}

Diese Regel gilt für alle h1-Elemente.

p {
  line-height: 1.6;
}

Diese Regel gilt für alle Absätze.

Das ist praktisch, wenn viele gleiche Elemente einheitlich aussehen sollen.

Klassen gezielt verwenden

Was ist eine Klasse?

Manchmal möchtest du nicht alle Absätze gleich gestalten, sondern nur einen bestimmten Absatz hervorheben.

Dafür verwendet man Klassen.

Im HTML:

<p class="wichtig">
  Dieser Absatz ist besonders wichtig.
</p>

Im CSS:

.wichtig {
  background-color: lightyellow;
  border: 2px solid orange;
  padding: 10px;
}

Der Punkt vor .wichtig zeigt im CSS, dass eine Klasse angesprochen wird.

Wichtig

Im HTML schreibst du class="wichtig". Im CSS schreibst du .wichtig.

Mehrere Elemente mit derselben Klasse

Eine Klasse kann mehrfach verwendet werden:

<p class="wichtig">Erster wichtiger Hinweis.</p>
<p class="wichtig">Zweiter wichtiger Hinweis.</p>

Beide Absätze bekommen dieselbe Gestaltung:

.wichtig {
  background-color: lightyellow;
  padding: 10px;
}

Das ist ein großer Vorteil gegenüber Inline-CSS: Du definierst die Gestaltung einmal und kannst sie mehrfach verwenden.

Externe CSS-Datei

Warum CSS auslagern?

Der <style>-Bereich ist übersichtlicher als Inline-CSS. Bei größeren Projekten gibt es aber noch eine bessere Lösung: eine eigene CSS-Datei.

Dann liegen Struktur und Gestaltung getrennt:

html-einstieg/
├─ index.html
├─ style.css
└─ images/

Das HTML-Dokument enthält die Inhalte. Die Datei style.css enthält die Gestaltung.

Diese Trennung hat mehrere Vorteile:

• Die HTML-Datei bleibt übersichtlicher.
• Die CSS-Datei kann für mehrere HTML-Seiten verwendet werden.
• Änderungen am Design können an einer zentralen Stelle gemacht werden.
• Inhalt und Gestaltung sind sauber getrennt.

Merksatz

Je größer die Website wird, desto sinnvoller ist eine eigene CSS-Datei.

CSS-Datei einbinden

Die CSS-Datei wird im head der HTML-Datei eingebunden:

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

Das vollständige Grundgerüst sieht dann zum Beispiel so aus:

<!DOCTYPE html>
<html>
  <head>
    <title>Informatik ist überall</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Informatik ist überall</h1>
    <p>HTML strukturiert Inhalte. CSS gestaltet sie.</p>
  </body>
</html>

Typischer Fehler

Die Einbindung funktioniert nur, wenn der Pfad stimmt. Wenn style.css im gleichen Ordner wie index.html liegt, lautet der Pfad style.css.

Wann verwendet man welche CSS-Variante?

Inline-CSS

Inline-CSS steht direkt im HTML-Element:

<p style="color: red;">Wichtiger Text</p>

Das ist sinnvoll:

• zum schnellen Testen
• für sehr kleine Einzelfälle
• wenn man direkt sehen möchte, welches Element betroffen ist

Es ist weniger sinnvoll:

• bei vielen Elementen
• bei wiederholter Gestaltung
• bei größeren Projekten

CSS im <style>-Bereich

CSS im <style>-Bereich steht im head derselben HTML-Datei:

<style>
  p {
    color: black;
  }
</style>

Das ist sinnvoll:

• für eine einzelne HTML-Datei
• wenn mehrere Elemente gleich gestaltet werden sollen
• wenn man CSS übersichtlicher sammeln möchte

Es ist weniger sinnvoll:

• wenn mehrere Webseiten dieselbe Gestaltung verwenden sollen
• wenn die CSS-Regeln sehr umfangreich werden

Externe CSS-Datei

CSS steht in einer eigenen Datei:

style.css

Das ist sinnvoll:

• für größere Projekte
• für mehrere HTML-Seiten
• für bessere Übersicht
• für saubere Trennung von Inhalt und Gestaltung

Zusammenfassung

Für den Einstieg testen wir zuerst Inline-CSS. Danach sammeln wir CSS im <style>-Bereich. Für größere Projekte verwenden wir eine eigene CSS-Datei.

Challenges

🎨 Challenge 1: Inline-CSS gezielt in deine HTML-Seite einbauen

Du gestaltest einzelne HTML-Elemente direkt mit dem style-Attribut. Ziel ist nicht ein perfektes Design, sondern das bewusste Ausprobieren einzelner CSS-Eigenschaften.

Aufgabe

Öffne deine index.html aus dem HTML-Kapitel und ergänze an ausgewählten Elementen Inline-CSS.

Setze mindestens um:

• Hauptüberschrift mit color
• eine Zwischenüberschrift mit background-color
• einen Absatz mit font-size
• eine Liste oder einen Absatz mit border
• ein Element mit padding
• ein Element mit margin
• ein Bild mit width oder max-width

Unvollständiges Beispiel

Vervollständige die Werte passend zu deiner Seite:

<h1 style="color: ...; text-align: ...;">
  ...
</h1>

<p style="font-size: ...; background-color: ...; padding: ...;">
  ...
</p>

Ziel

Am Ende sollst du erkennen:

• welche Eigenschaft welchen sichtbaren Effekt hat
• warum Inline-CSS zum Testen praktisch ist
• warum Inline-CSS bei vielen Elementen schnell unübersichtlich wird

Wichtig

Verwende Inline-CSS hier bewusst zum Lernen und Testen. Diese Variante bleibt nicht die endgültige Lösung für die ganze Seite.

🎨 Challenge 2: Gestaltung in den <style>-Bereich übertragen

Du überträgst wiederkehrende Gestaltung aus einzelnen HTML-Elementen in einen gemeinsamen <style>-Bereich im head.

Aufgabe

1. Erstelle in deiner index.html im <head> einen <style>-Bereich.
2. Gestalte dort mindestens:
   • body
   • h1
   • h2
   • p
   • ul oder ol
   • table
   • img
3. Entferne Inline-CSS dort, wo dieselbe Gestaltung nun allgemein im <style>-Bereich geregelt wird.
4. Behalte höchstens einzelne Inline-Tests, wenn sie bewusst als Vergleich dienen.

Unvollständiges Beispiel

Vervollständige die Regeln sinnvoll:

<head>
  <title>...</title>
  <style>
    body {
      font-family: ...;
      background-color: ...;
      max-width: ...;
      margin: ...;
      padding: ...;
    }

    h1 {
      color: ...;
      text-align: ...;
    }

    p {
      font-size: ...;
      line-height: ...;
    }
  </style>
</head>

Klassen ergänzen

Ergänze außerdem mindestens eine eigene Klasse, zum Beispiel für einen Hinweis oder eine Infobox.

HTML:

<p class="...">
  ...
</p>

CSS:

.deine-klasse {
  background-color: ...;
  border-left: ...;
  padding: ...;
}

Hinweis

Der <style>-Bereich ist sinnvoll, wenn mehrere Elemente einer einzelnen HTML-Datei einheitlich gestaltet werden sollen.

🎨 Challenge 3: CSS in eine eigene Datei auslagern

Du trennst Inhalt und Gestaltung. Aus deiner bisherigen Gestaltung im <style>-Bereich wird eine eigene Datei style.css.

Aufgabe

1. Erstelle im Ordner html-einstieg eine neue Datei:

style.css

2. Kopiere deine CSS-Regeln aus dem <style>-Bereich in style.css.
3. Entferne den <style>-Bereich aus deiner HTML-Datei.
4. Binde die CSS-Datei im <head> deiner HTML-Datei ein:

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

5. Speichere beide Dateien.
6. Öffne index.html im Browser und prüfe, ob die Gestaltung weiterhin funktioniert.

Kontrolle

Prüfe besonders:

• Liegt style.css im gleichen Ordner wie index.html?
• Ist der Dateiname exakt gleich geschrieben?
• Wird die CSS-Datei im <head> eingebunden?
• Sieht die Seite nach dem Auslagern gleich oder sehr ähnlich aus?
• Sind Bilder, Tabellen und Listen weiterhin sinnvoll dargestellt?

Fehlersuche

Wenn die Seite plötzlich ungestaltet aussieht, wird die CSS-Datei wahrscheinlich nicht geladen. Prüfe zuerst Dateiname, Speicherort und href.

🎨 Challenge 4: Drei CSS-Varianten vergleichen und Mini-Abgabe erstellen

Du hast nun alle drei Varianten kennengelernt:

• Inline-CSS direkt im Element
• CSS im <style>-Bereich
• CSS in einer externen Datei style.css

Aufgabe

Erstelle eine finale Version deiner Seite, in der die Gestaltung hauptsächlich über style.css erfolgt.

Die Seite soll zeigen, dass du alle drei Varianten verstanden hast:

• Inline-CSS wurde ausprobiert und weitgehend bereinigt.
• Der <style>-Bereich wurde als Zwischenschritt verwendet.
• Die finale Gestaltung liegt in style.css.

Mini-Abgabe

Am Ende soll dein Ordner so aussehen:

html-einstieg/
├─ index.html
├─ style.css
└─ images/
   └─ dein-bild.png

Deine Abgabe soll enthalten:

• eine strukturierte HTML-Seite aus Kapitel 1
• eine eingebundene externe CSS-Datei
• gestaltete Überschriften und Absätze
• sinnvolle Abstände
• mindestens eine gestaltete Liste
• eine gestaltete Tabelle
• ein sinnvoll skaliertes Bild
• mindestens eine Klasse
• möglichst keine kaputten Pfade

Optional: CSS-Fehler finden

Untersuche diesen fehlerhaften CSS-Code und korrigiere ihn in einer Testdatei oder mündlich im Team:

body {
  font-family Arial, sans-serif;
  background-color: #f4f4f4
}

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

p {
  font-size: 18px;
  line-height 1.5;
}

Gestaltungshinweis

Gutes Design bedeutet nicht möglichst viele Effekte. Gute Gestaltung unterstützt den Inhalt und macht die Seite klarer lesbar.

Wissensspeicher

Wichtige Begriffe

CSS Sprache zur Gestaltung von HTML-Dokumenten.

Inline-CSS CSS direkt im HTML-Element, zum Beispiel mit style="color: red;".

style-Attribut HTML-Attribut, mit dem ein einzelnes Element direkt gestaltet wird.

<style>-Bereich Bereich im head, in dem CSS-Regeln für eine HTML-Datei gesammelt werden.

Externe CSS-Datei Eigene Datei, meist style.css, in der CSS-Regeln gespeichert werden.

Selektor Teil einer CSS-Regel, der auswählt, welche Elemente gestaltet werden.

Eigenschaft CSS-Angabe, die festlegt, was verändert wird, zum Beispiel color.

Wert CSS-Angabe, die festlegt, wie etwas verändert wird, zum Beispiel blue.

Klasse Möglichkeit, einzelne oder mehrere HTML-Elemente gezielt zu gestalten.

padding Innenabstand eines Elements.

margin Außenabstand eines Elements.

border Rahmen eines Elements.

Hex-Code Farbangabe wie #3366cc.

RGB-Wert Farbangabe wie rgb(51, 102, 204).

Abschlussgedanke

CSS macht aus einer strukturierten HTML-Seite eine gestaltete Webseite. Am Anfang ist Inline-CSS hilfreich, weil du sofort siehst, was passiert. Mit zunehmender Größe wird Gestaltung aber besser gesammelt und schließlich in eine eigene CSS-Datei ausgelagert. Genau diese Entwicklung ist ein wichtiger Schritt vom Ausprobieren hin zu sauberer Webentwicklung.