← Zurück zur Übersicht

A09 – Externes Stylesheet: alle Seiten gemeinsam stylen

🎯 Lernziel: Du kannst eine externe CSS-Datei erstellen und in mehrere HTML-Seiten einbinden, sodass alle Seiten ein einheitliches Grunddesign teilen.

Referenz im Kurs: → Beispiele b_03_einbindung-extern.html, b_04_einbindung-kombination.html, b_12_vererbung.html

Warum ein externes Stylesheet?

In A08 hast du CSS direkt in jede HTML-Datei geschrieben. Das funktioniert, hat aber einen großen Nachteil: Willst du etwas ändern (z. B. die Schriftart), musst du jede Datei einzeln anfassen. Mit einer externen CSS-Datei reicht eine einzige Änderung, die für alle Seiten wirkt.

Aufgabe A09

Schritt 1 – CSS-Datei anlegen

Lege im Projektordner eine neue Datei style.css an (kein HTML-Grundgerüst – reine CSS-Datei!). Füge darin gemeinsame Regeln für alle Seiten ein:

/* Gemeinsames Design für alle Elementseiten */

body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto;
    padding: 1em 2em;
}

h1 {
    font-size: 2em;
    margin-bottom: 0.3em;
}

h2 {
    margin-top: 1.5em;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.2em;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

nav {
    margin-bottom: 1.5em;
    padding: 0.5em 0;
    border-bottom: 1px solid #ccc;
}

img {
    max-width: 100%;   /* Bilder nie breiter als ihr Container */
    height: auto;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 0.4em 0.8em;
    border: 1px solid #ccc;
    text-align: left;
}

th {
    font-weight: bold;
}

Schritt 2 – Stylesheet in alle HTML-Dateien einbinden

Öffne alle deine HTML-Dateien (index.html, feuer.html, erde.html, luft.html, wasser.html) und füge im <head> folgende Zeile ein:

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

Deine Projektstruktur sollte jetzt so aussehen:

vier-elemente/
├── index.html
├── feuer.html
├── erde.html
├── luft.html
├── wasser.html
├── style.css
└── bilder/
    ├── wasser1.jpg
    └── wasser2.jpg

Schritt 3 – Seitenspezifisches CSS beibehalten

Jede Seite kann zusätzlich ihr eigenes Farbschema im <style>-Tag haben. Das externe Stylesheet liefert die gemeinsame Basis, der interne <style>-Block überschreibt gezielt:

<!-- feuer.html -->
<link rel="stylesheet" href="style.css">
<style>
    /* Nur für Feuer-Seite */
    body {
        background-color: #1a0a00;
        color: #f5deb3;
    }
    h1, h2 { color: #ff6600; }
</style>
💡 Die Kaskade:
CSS steht für „Cascading Style Sheets". Die Reihenfolge der Einbindung bestimmt, was zuletzt gilt:
1. Externes Stylesheet (<link>)
2. Interne Styles (<style> im <head>)
3. Inline-Styles (style="…" am Tag)
Spätere Regeln überschreiben frühere, falls sie denselben Selektor haben.

Zusatzaufgabe

Füge in style.css eine Regel für nav a ein, die Links in der Navigation anders formatiert als normale Links im Text. Experimentiere mit color, font-weight und padding.