CSS: Inhalt und Design trennen

IT 11.7 – Webdesign · Einheit 4 · Café-Projekt Schritt 4

Lernziele

Du kannst erklären, warum man Inhalt (HTML) und Design (CSS) trennt, und CSS in eine Seite einbinden.
Du kannst CSS-Regeln aus Selektor, Eigenschaft und Wert schreiben und Elemente über Element-, Klassen- und ID-Selektoren auswählen.
Du kannst Farben, Schrift und Text gestalten.
Du kannst bestimmen, welche Regel gewinnt, wenn mehrere Regeln für ein Element gelten.

Rückblick

1. Was ist der Unterschied zwischen th und td?

th ist eine Kopfzelle (Überschrift einer Spalte oder Zeile), td eine Datenzelle.

2. Wie verbindet man ein label mit seinem Eingabefeld?

Mit for im label, das genau der id des Felds entspricht.

3. Warum reicht required allein nicht aus, um Pflichtangaben sicherzustellen?

Die Prüfung läuft nur im Browser und lässt sich umgehen. Der Server muss selbst prüfen.

Ein neues Farbschema für drei Seiten

Die Café-Seite hat jetzt drei Seiten, aber sie sieht noch aus wie 1995: schwarze Schrift auf Weiß, blaue Links. Die Schülervertretung wünscht sich die Farben des Cafés: warmes Braun und Creme.

Ein Mitschüler schlägt vor, die Farbe direkt an jede Überschrift zu schreiben, etwa <h2 style="color: brown">. Auf drei Seiten mit je fünf Überschriften sind das fünfzehn Stellen. Und nächste Woche möchte die Schülervertretung vielleicht doch Grün …

Erkunden: Regeln und wer gewinnt

Bevor du weiterliest: Bearbeite die Erkundung. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung: CSS ausprobieren mittel

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Ändere bei h1 den Wert #874026 in green und dann in #1d6b3a. Beschreibe, was die beiden Schreibweisen bedeuten könnten.

b) Erläutere, warum genau die zwei unteren Absätze hinterlegt sind, der erste aber nicht. Welche Rolle spielt der Punkt vor hinweis?

c) Füge am Ende eine Regel #sonder { background-color: #f8c9c9; } hinzu. Welcher Absatz ändert sich?

d) Verschiebe die Regel aus c) an den Anfang des CSS. Ändert sich etwas? Stelle eine Vermutung auf, nach welcher Regel der Browser entscheidet, wenn zwei Regeln sich widersprechen.

e) Füge in der Regel .hinweis die Zeile color: blue; hinzu. Welche Farbe hat der Text der Hinweise jetzt, und warum gewinnt diese Regel gegen die Regel für p?

Tipp 1

Zu d) und e): Vergleiche, wie „genau“ die Selektoren sind. p meint alle Absätze, .hinweis nur manche, #sonder genau einen.

Lösung

Warum Inhalt und Design trennen?

Vergleicht eure Ideen aus Einstieg und Erkundung.

HTML beschreibt, was etwas ist (Überschrift, Liste, Formular). CSS (Cascading Style Sheets, „gestufte Gestaltungsvorlagen“) beschreibt, wie es aussieht. Die Gestaltung steht in einer eigenen Datei, die alle Seiten gemeinsam nutzen.

Vorteile:

Einheitlich: Alle Seiten sehen gleich aus, weil sie dieselbe Gestaltung nutzen.
Schnell geändert: Eine Farbe ändert man an einer Stelle, und alle Seiten passen sich an.
Übersichtlich: Der HTML-Code bleibt kurz und lesbar, jeder kann an seinem Teil arbeiten.
Flexibel: Dieselben Inhalte können für Bildschirm, Handy oder Druck verschieden gestaltet werden (Einheit 7).
Schneller: Der Browser lädt die CSS-Datei nur einmal und verwendet sie für alle Seiten.

CSS einbinden

Es gibt drei Wege, von denen einer der übliche ist:

Weg	So geht’s	Einsatz
externe Datei	im `head`: `<link rel="stylesheet" href="style.css">`	der Normalfall für Webseiten
im Kopf der Seite	im `head`: `<style> … </style>`	einzelne Seite, Experimente
direkt am Element	`<p style="color: red">`	nur in Ausnahmen; widerspricht der Trennung

Aufbau einer Regel

h1 {
  color: #874026;
  font-size: 2rem;
}

Selektor (h1): wen die Regel betrifft.
In geschweiften Klammern stehen Deklarationen, jede aus Eigenschaft (color), Doppelpunkt, Wert (#874026) und Semikolon.
Kommentare in CSS: /* Farben des Cafés */

Selektoren

Selektor	Beispiel	wählt aus
Element	`p`	alle `p`-Elemente
Klasse	`.vegan`	alle Elemente mit `class="vegan"`
ID	`#sonder`	das eine Element mit `id="sonder"`
Nachfahre	`nav a`	alle `a`, die irgendwo in einem `nav` stehen
Gruppe	`h1, h2`	alle `h1` und alle `h2`

Ein Element kann mehrere Klassen haben, getrennt durch Leerzeichen: class="hinweis wichtig". Klassen sind das wichtigste Werkzeug: Man kann sie beliebig oft vergeben und damit festlegen, welche Elemente gleich aussehen sollen. IDs sind für einzelne Elemente gedacht.

Farben, Schrift und Text

Eigenschaft	Beispiel	bewirkt
`color`	`color: #333333;`	Textfarbe
`background-color`	`background-color: #f6efe6;`	Hintergrundfarbe
`font-family`	`font-family: Georgia, serif;`	Schriftart; mehrere als Ersatz, am Ende eine allgemeine Familie
`font-size`	`font-size: 1.25rem;`	Schriftgröße
`font-weight`	`font-weight: bold;`	Fettdruck
`text-align`	`text-align: center;`	Ausrichtung
`line-height`	`line-height: 1.5;`	Zeilenabstand
`text-decoration`	`text-decoration: none;`	Unterstreichung (zum Beispiel bei Links) entfernen

Farben kann man als Namen (brown), als Hex-Code (#874026) oder mit rgb(135, 64, 38) angeben. Hex-Code und rgb bedeuten dasselbe: Anteile von Rot, Grün und Blau.

Größen: px sind Bildpunkte. rem bezieht sich auf die Grundschrift, die man im Browser einstellen kann: 1rem ist normal groß, 2rem doppelt so groß. Mit rem wachsen die Größen mit, wenn jemand die Schrift größer stellt. Das hilft Menschen, die schlecht sehen.

Viele Browser bringen nur einige Schriften sicher mit, zum Beispiel Arial, Georgia oder Verdana. Eine allgemeine Familie wie serif oder sans-serif am Ende sorgt dafür, dass immer etwas Passendes erscheint.

Welche Regel gewinnt?

Für ein Element gelten oft mehrere Regeln. Sagen sie dasselbe, ist alles gut. Widersprechen sie sich, entscheidet der Browser so:

Genauigkeit (Spezifität): Die genauere Regel gewinnt. ID vor Klasse vor Element.
Reihenfolge: Sind beide gleich genau, gewinnt die Regel, die später steht.
Angaben direkt am Element (style="…") gewinnen gegen beides.

Dieses Stufen-System gab CSS den Namen (cascading).

Vererbung: Manche Eigenschaften, vor allem Schrift und Textfarbe, werden an innere Elemente weitergegeben. Gibt man body eine Schriftart, gilt sie für die ganze Seite, wenn kein Element etwas anderes sagt. Rahmen und Hintergründe werden nicht vererbt.

Café-Projekt: Schritt 4

Café-Projekt, Schritt 4: Die Gestaltung mittel

Lege im Ordner schuelercafe die Datei style.css an.
Binde sie in allen drei Seiten im head ein.
Gestalte mit diesen Vorgaben der Schülervertretung:
- Seite: Hintergrund Creme #f6efe6, Text dunkelgrau #2b2522, Schrift „Verdana, sans-serif“, Zeilenabstand 1.5.
- Überschriften h1 und h2: Braun #874026, Schrift „Georgia, serif“.
- Links in der Navigation: Braun, ohne Unterstreichung, fett.
- Tabelle der Speisekarte: Kopfzellen mit Hintergrund #e8d3b9; Preise rechtsbündig.
- Vegane Produkte: Markiere den Hinweis „vegan“ mit einer Klasse vegan und färbe ihn grün #1d6b3a.
Ändere testweise die Farbe der Überschriften an einer Stelle. Prüfe, ob sich alle drei Seiten ändern.

Tipp 1

Für die rechtsbündigen Preise kannst du den Preiszellen eine Klasse geben, zum Beispiel class="preis".

Tipp 2

Rahmenlinien zwischen den Tabellenzellen kommen in Einheit 5. Wer schon jetzt möchte: border-collapse: collapse; bei table und border: 1px solid #c9b29a; bei th, td.

Stand nach Schritt 4

Aufgaben

Aufgabe 1: Eine Vereinsseite gestalten leicht

Ergänze das CSS so, dass alle Prüfungen bestehen. Das HTML darfst du nicht ändern.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Aufgabe 2: Code lesen – welche Farbe? mittel

<p>Absatz A</p>
<p class="info">Absatz B</p>
<p class="info" id="eilig">Absatz C</p>
<div class="info"><p>Absatz D</p></div>

p { color: black; }
.info { color: green; }
#eilig { color: red; }
p { color: gray; }

Bestimme für jeden Absatz die Textfarbe und begründe.

Tipp 1

Für jeden Absatz: Welche Regeln gelten direkt für ihn? Welche ist die genaueste? Und bei D: Gilt .info für das p selbst oder für das div darum?

Lösung

Aufgabe 3: Klassen einsetzen mittel

a) Nenne zwei Aufgaben von CSS-Klassen.

b) Auf der Seite einer Bücherei sollen alle Neuerscheinungen (mehrere Absätze und Listeneinträge) einen gelben Hintergrund bekommen. Gib ein Codebeispiel in HTML und CSS an, das das mit einem selbst gewählten Klassennamen umsetzt.

c) Nenne einen Vorteil der Trennung von HTML und CSS für die Bücherei.

Lösung

Aufgabe 4: Fehler im CSS mittel

Dieses CSS funktioniert nur teilweise. Finde die vier Fehler und gib die Verbesserung an.

body {
  font-family: Verdana, sans-serif
  color: #2b2522;
}

vegan {
  color: #1d6b3a;
}

h2 {
  font-size: 2;
  colour: #874026;
}

Tipp 1

Prüfe jede Zeile auf: Semikolon, Punkt bei Klassen, Einheit bei Größen, richtig geschriebene Eigenschaften (CSS ist englisch).

Lösung

Aufgabe 5: Inline-Stile umbauen schwer

Die Webseite eines Musikvereins hat 30 Seiten. Auf jeder Seite stehen die Gestaltungsangaben direkt an den Elementen, zum Beispiel <h2 style="color: darkred; font-family: Georgia"> und <p style="font-size: 14px">.

a) Beurteile diese Lösung. Gehe auf mindestens drei Gesichtspunkte ein.

b) Entwickle einen Plan, wie die Seiten Schritt für Schritt auf eine gemeinsame CSS-Datei umgestellt werden können.

Tipp 1

Denk an: Änderungen, Einheitlichkeit, Lesbarkeit, Ladezeit, verschiedene Geräte.

Lösung (Beispiel)

Zusatzaufgabe: Farben als Variablen und Hover schwer Zusatz

a) Recherchiere CSS-Variablen (custom properties). Lege die beiden Café-Farben am Anfang von style.css als Variablen an und verwende sie überall.

b) Sorge dafür, dass sich die Links der Navigation färben, wenn man mit der Maus darüberfährt (:hover) und wenn man sie mit der Tastatur erreicht (:focus).

Lösung (Beispiel)

Zusammenfassung

HTML beschreibt den Inhalt, CSS das Aussehen. Getrennt sind Seiten einheitlich, schnell geändert und übersichtlich.
CSS gehört in eine externe Datei: <link rel="stylesheet" href="style.css"> im head.
Eine Regel besteht aus Selektor und Deklarationen aus Eigenschaft: Wert;.
Selektoren: Element (p), Klasse (.vegan), ID (#sonder), Nachfahre (nav a), Gruppe (h1, h2).
Farben als Name, Hex-Code oder rgb; Schriftgrößen am besten in rem.
Wer gewinnt: genauere Regel (ID vor Klasse vor Element), bei Gleichstand die spätere. Schrift und Textfarbe werden vererbt.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du erklären, warum man Inhalt und Design trennt, und CSS einbinden? → Warum trennen?, CSS einbinden, Aufgabe 3, Aufgabe 5
Kannst du Regeln schreiben und Selektoren einsetzen? → Erkundung, Aufbau einer Regel, Aufgabe 1, Aufgabe 4
Kannst du Farben, Schrift und Text gestalten? → Farben, Schrift und Text, Café-Projekt
Kannst du bestimmen, welche Regel gewinnt? → Welche Regel gewinnt?, Aufgabe 2

Wortspeicher

Begriff	Bedeutung in einfachen Worten
CSS	Sprache, die das Aussehen einer Seite festlegt
Trennung von Inhalt und Design	HTML für den Inhalt, CSS in eigener Datei für das Aussehen
Regel	Selektor mit Deklarationen in geschweiften Klammern
Selektor	legt fest, für welche Elemente eine Regel gilt
Eigenschaft / Wert	was gestaltet wird / wie, zum Beispiel `color` / `#874026`
Klasse	Name für eine Gruppe von Elementen; im CSS mit Punkt
ID	eindeutiger Name für genau ein Element; im CSS mit `#`
Hex-Code	Farbangabe aus Rot-, Grün- und Blauanteil, zum Beispiel `#874026`
rem	Größe im Verhältnis zur Grundschrift
Spezifität	wie genau ein Selektor ist; die genauere Regel gewinnt
Vererbung	innere Elemente übernehmen Schrift und Textfarbe vom äußeren

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 11.7 Webdesign (Stand November 2022).
CSS nach den Spezifikationen des W3C (CSS Cascading and Inheritance, CSS Selectors, CSS Color).
Texte, Beispiele, Aufgaben und Code-Beispiele sind selbst erstellt.