Modul 8
Eine eigene CSS Datei
Wenn du viele Absätze gleich gestalten willst, wird Inline-CSS schnell unübersichtlich. Deshalb sammeln wir die Gestaltung in einer eigenen Datei. Sie heißt style.css und liegt neben index.html.
Zwei Dateien gehören jetzt zusammen
Bisher hast du Gestaltung direkt an mehrere HTML-Tags geschrieben. Jetzt sammelst du gemeinsame Regeln in style.css. Beide Dateien liegen im selben Ordner: index.html enthält den Inhalt, style.css die Gestaltung. Du kannst beide in VS Code gleichzeitig als Tabs geöffnet lassen.
Die Verbindung steht im head der HTML-Datei: <link rel="stylesheet" href="style.css">. href nennt hier deine CSS-Datei. Ohne diese Verbindung kennt der Browser deine Regeln nicht. Speichere deshalb sowohl die HTML-Datei als auch die CSS-Datei.
Eine Regel gilt für mehrere Elemente
In h1 { color: navy; } steht h1 für die Elemente, die gestaltet werden. Zwischen den geschweiften Klammern stehen die Angaben. Eine Regel für p gilt für alle Absätze. Bei th, td trennt das Komma zwei Elementnamen: Dieselbe Rahmenregel gilt für beide Arten von Tabellenzellen.
In style.css schreibst du keine HTML-Tags und kein style="…" um die Regeln. Entferne passende alte Inline-Angaben erst, wenn die Verbindung funktioniert. Eine alte Farbe direkt an h1 kann sonst die neue Farbe aus der Datei überdecken. Die Unterstreichung aus Modul 3 darf vorerst bleiben.
Ein link-Element im head verbindet beide Dateien. In der CSS-Datei steht zum Beispiel p { color: navy; }. p wählt alle Absätze aus. Die geschweiften Klammern umschließen die Angaben. In style.css stehen keine HTML-Tags und auch keine <style>-Tags.
Die Bausteine
| Schreibweise | Bedeutung |
|---|---|
| <link rel="stylesheet" href="style.css"> | Verknüpfung im head. |
| p { color: navy; } | Alle Absätze dunkelblau gestalten. |
| h1 { color: darkgreen; } | Alle h1-Überschriften gestalten. |
| th, td { border: 1px solid black; } | Überschrifts- und Datenzellen gemeinsam umranden. |
Diese Regeln stehen in style.css
body {
font-family: Arial, sans-serif;
background-color: #eef4f8;
color: #202b33;
}
h1 { color: navy; }
table { border-collapse: collapse; }
th, td {
border: 1px solid black;
padding: 8px;
}Entferne alte Inline-Angaben, die du jetzt in style.css regelst. Sonst können sie weiterhin Vorrang haben. Beispiel: Ein style="color: red;" direkt an h1 schlägt die normale externe h1-Farbregel. Den Rahmen der Tabelle kannst du jetzt zentral ändern.
Deine Aufgabe
Arbeite in deinem Ordner mein-hobby weiter. Bearbeite die Schritte der Reihe nach. Verwende dein eigenes Hobby und formuliere eigene Sätze. Speichere nach jedem größeren Arbeitsschritt und sieh dir das Ergebnis im Browser an.
- Erstelle style.css im selben Ordner wie index.html. Öffne beide Dateien in VS Code und schreibe die link-Verknüpfung in den head der HTML-Datei.
- Beginne in style.css mit einer h1-Regel für eine deutlich erkennbare Farbe. Entferne die alte Farbangabe direkt an h1. Speichere beide Dateien und prüfe im Browser, ob die Verbindung funktioniert.
- Übernimm danach die body-Regel für Schrift und Hintergrund. Entferne nur die entsprechenden Inline-Angaben am body. Dein Text und die HTML-Tags bleiben erhalten.
- Übertrage die Tabellenregeln. Entferne die border-Angaben an th und td sowie border-collapse am table-Start-Tag. Schreibe die gemeinsamen Regeln einmal in style.css.
- Ändere den Rahmen aller Tabellenzellen über die gemeinsame Regel auf dunkelblau. Ergänze padding: 8px; bei th, td, damit der Text nicht direkt an der Linie steht.
- Schreibe eine h2-Regel mit einer passenden Farbe. Sie soll alle Unterüberschriften gemeinsam gestalten. Schau im Browser nach, ob tatsächlich mehrere Überschriften betroffen sind.
- Ergänze einen Absatz mit drei Sätzen über deine bisherige Arbeit an der Hobbyseite. Speichere beide Dateien. Die Seite soll ihren Inhalt behalten und ihre gemeinsame Gestaltung jetzt aus style.css bekommen.
Die HTML-Datei enthält die Inhalte; style.css gestaltet die Seite und die Tabellenrahmen.
Zum Abschluss
Kreuzworträtsel
Sechs Begriffe aus diesem Modul. Ein Kästchen steht für einen Buchstaben. Schreibe groß, ohne Leerzeichen: Ä = AE, Ö = OE, Ü = UE, ß = SS. Fülle das Rätsel auf deinem Handout aus.
Waagrecht →
- 3. Hier steht die Stylesheet-Verknüpfung. (4 Buchstaben)
- 5. Diese geschweiften Zeichen umschließen die CSS-Angaben. (8 Buchstaben)
- 6. Das musst du nach Änderungen an beiden Dateien tun. (9 Buchstaben)
Senkrecht ↓
- 1. Dieses Element verbindet das HTML mit der CSS-Datei. (4 Buchstaben)
- 2. Sie besteht zum Beispiel aus h1 und Angaben in geschweiften Klammern. (5 Buchstaben)
- 4. style.css ist eine eigene … (5 Buchstaben)
Drei Abschlussfragen
- Wie verbindest du index.html mit style.css?
- Warum ist eine gemeinsame Regel für Tabellenrahmen praktisch?
- Was prüfst du, wenn eine neue externe Farbe nicht erscheint?
Online-Quiz
Zehn Fragen, jeweils eine richtige Antwort. Klicke dich durch und erhalte am Ende deine Punkte mit kurzen Erklärungen. Keine Anmeldung nötig.
Online-Quiz starten · Modul 8