1. Unterrichtsblock: CSS Grundlagen und Syntax

Aufgabe 1 – Die Projektseite bekommt ein Stylesheet

Zeit: ca. 8 Minuten

Deine Projektseite aus den HTML-Blöcken wird die erste Seite mit eigenem Aussehen.

1. Lege im Ordner deiner Projektseite die Datei style.css an und schreibe zwei Regeln hinein: eine für h1 (Textfarbe darkgreen) und eine für body (background-color: whitesmoke;).
2. Binde style.css im head von index.html ein. Sage voraus, was du nach dem Speichern und Neuladen siehst, und prüfe es.
3. Öffne mit F12 die Entwicklerwerkzeuge (Reiter „Elemente“), klicke die Überschrift an und suche rechts im Bereich „Stile“ deine Regel. Welche Datei und Zeile steht dort?
4. Binde style.css auch in ueber-mich.html ein und lade die Seite neu.

Kontrolle: Die Überschrift ist dunkelgrün und der Hintergrund hellgrau. Bei der Regel stehen style.css und die Zeilennummer, in der h1 steht. Auch „Über mich“ sieht jetzt so aus.

style.css (erste Fassung):

Im head von index.html und ueber-mich.html:

In den Entwicklerwerkzeugen steht neben der Regel style.css:1 (bei h1) bzw. style.css:5 (bei body). Die Zeilennummer kann bei dir abweichen. Beide Seiten nutzen dieselbe Datei und sehen deshalb gleich aus.

Aufgabe 2 – Wer gewinnt?

Zeit: ca. 6 Minuten

Auf einen Absatz passen oft mehrere Regeln, die ihm unterschiedliche Farben geben wollen. Sage voraus, welche Farbe jeder Absatz bekommt, bevor du die Datei öffnest.

<style>
  p { color: blue; }
  .hinweis { color: green; }
  #wichtig { color: red; }
  p { color: orange; }
</style>

<p>Absatz 1</p>
<p class="hinweis">Absatz 2</p>
<p class="hinweis" id="wichtig">Absatz 3</p>
<p class="hinweis" style="color: purple;">Absatz 4</p>

1. Schreibe deine Vorhersage für alle vier Absätze auf. Begründe jede Farbe in einem Satz.
2. Speichere den Code als wer-gewinnt.html (das style-Element gehört in den head, die Absätze in den body) und prüfe deine Vorhersage. Wo lagst du falsch?
3. Vertausche die beiden p-Regeln im Stylesheet. Welcher Absatz ändert seine Farbe? Warum nur dieser?

Kontrolle: Absatz 1 ist orange. Nach dem Vertauschen ändert sich genau ein Absatz.

Absatz 1 ist orange (beide p-Regeln passen, die untere gewinnt). Absatz 2 ist grün: die Klasse schlägt den Element-Selektor, auch wenn p weiter unten steht. Absatz 3 ist rot (id schlägt Klasse). Absatz 4 ist violett (das style-Attribut schlägt alles). Nach dem Vertauschen wird nur Absatz 1 blau, denn nur dort entscheidet allein die Reihenfolge.

Aufgabe 3 – Fehlerjagd im Stylesheet

Zeit: ca. 8 Minuten

Ein Kollege hat das Stylesheet für die Vereinsseite geschrieben, aber der Browser ignoriert vieles davon. CSS meldet keine Fehler: Was der Browser nicht versteht, überspringt er einfach.

Gewünscht ist: Überschrift mittig und dunkelgrün, Hinweis mit gelbem Hintergrund, fett und 18 px groß, beide Absätze marineblau (navy), Links ohne Unterstreichung.

fehlerjagd.html:

<h1>Wanderverein Alpenblick</h1>
<nav><a href="#">Touren</a> <a href="#">Kontakt</a></nav>
<p class="hinweis">Anmeldung bis Freitag!</p>
<p>Wir wandern bei jedem Wetter.</p>

fehlerjagd.css:

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

.hinweis {
  background-color= yellow;
  font-size: 18px;
}

hinweis {
  font-weight: bold;
}

p {
  colour: navy;
}

// Links ohne Unterstreichung
nav a {
  text-decoration: none;
}

1. Lege beide Dateien an (in der HTML-Datei fehlen nur head und Grundgerüst, ergänze sie und binde fehlerjagd.css ein) und öffne die Seite. Notiere, was nicht dem Wunsch entspricht.
2. Öffne die Entwicklerwerkzeuge (F12, Reiter „Elemente“) und klicke einzelne Elemente an. Der Browser streicht ungültige Zeilen durch oder markiert sie mit einem Warnzeichen.
3. Es sind fünf Fehler. Repariere sie und schreibe zu jedem einen CSS-Kommentar (/* ... */).

Tipp: Ein vergessenes Semikolon macht meist nicht nur eine, sondern zwei Zeilen unwirksam.

Kontrolle: Nach der Reparatur stimmt alles aus dem Wunsch. Mindestens zwei Fehler hast du über die durchgestrichenen Zeilen in den Entwicklerwerkzeugen gefunden.

Aufgabe 4 – Die Projektseite gestalten

Zeit: ca. 15 Minuten

Jetzt bekommt deine Projektseite ein eigenes Aussehen. Alles kommt in style.css. Im HTML änderst du höchstens class und id. Für Farben reichen heute Farbnamen wie seagreen, crimson oder darkslategray; die genauen Möglichkeiten lernst du im nächsten Block.

1. body: Schriftart Arial, sans-serif, eine Hintergrundfarbe und eine Textfarbe nach Wahl.
2. h1 zentriert und farbig. Alle h2 und h3 bekommen gemeinsam eine zweite Farbe (Gruppierung mit Komma).
3. Ein wichtiger Satz bekommt die Klasse hervorgehoben (fett, größere Schrift, eigene Farbe). Verwende die Klasse an mindestens zwei Stellen deiner Seiten.
4. Die Überschrift mit der id oben bekommt über #oben eine größere Schrift (font-size: 40px).
5. Links ohne Unterstreichung (text-decoration: none). Der Fußbereich footer bekommt kleine, graue, zentrierte Schrift.
6. Gliedere style.css mit Kommentaren in Abschnitte. Binde die Datei in allen Seiten deines Projekts ein.

Kontrolle: Entfernst du testweise die link-Zeile im head, sieht die Seite wieder aus wie zuvor. In deiner Datei kommen ein Element-Selektor, ein Klassen-Selektor, ein id-Selektor und eine Gruppierung vor.

Mögliche Fassung (Farben und Größen sind Geschmackssache). Im HTML tragen die wichtigen Sätze class="hervorgehoben", die Überschrift id="oben".

Aufgabe 5 – Aufräumen: Ein Praktikant hat inline gestaltet

Zeit: ca. 10 Minuten

Ein Praktikant hat die Tourenseite nur mit style-Attributen gestaltet. Das sieht gut aus, aber jede Änderung kostet viele Handgriffe.

aufraeumen.html (Inhalt des body):

<h2 style="color: seagreen; text-align: center;">Unsere Touren</h2>
<p style="color: darkslategray; font-size: 18px;">Bergsee-Runde: 2 Stunden, leicht</p>
<p style="color: darkslategray; font-size: 18px;">Gipfeltour: 5 Stunden, schwer</p>
<p style="color: crimson; font-size: 18px; font-weight: bold;">Klamm: gesperrt</p>
<h2 style="color: seagreen; text-align: center;">Termine</h2>
<p style="color: darkslategray; font-size: 18px;">Samstag, 10 Uhr: Treffpunkt Parkplatz</p>
<p style="color: crimson; font-size: 18px; font-weight: bold;">Anmeldung bis Freitag</p>

1. Zähle: Wie oft steht font-size: 18px; im Code? Der Verein möchte 20 px. An wie vielen Stellen müsstest du ändern?
2. Lege aufraeumen.css an, binde sie ein und entferne alle style-Attribute. Ersetze sie durch Regeln: gemeinsame Eigenschaften in die Regeln für h2 und p, nur die Abweichungen (rot, fett) in eine Klasse warnung.
3. Stelle die Schriftgröße auf 20 px um. An wie vielen Stellen musst du jetzt ändern?

Tipp: Die Klasse braucht nur die Eigenschaften, die vom Element-Selektor abweichen. Erinnere dich an Aufgabe 2: Wer gewinnt, die Klasse oder das Element?

Kontrolle: Vorher 5 Stellen, nachher 1. Im HTML kommt kein style-Attribut mehr vor, die Seite sieht (bis auf die 20 px) so aus wie vorher.

Aufgabe 6 – Ein Plakat für den Wandertag

Zeit: ca. 12 Minuten

Der Wanderverein braucht ein Plakat für den Wandertag am Bergsee. Du entscheidest, wie es aussieht. Nur CSS, noch keine Bilder.

1. Lege plakat.html und plakat.css an. Das HTML enthält eine Überschrift, einen Untertitel, drei Informationen (Wann? Wo? Was mitbringen?) und einen Anmeldehinweis.
2. Gestalte das Plakat mit mindestens zwei Klassen, einer id und einer Gruppierung. Verwende background-color, color, font-size und text-align.
3. Die wichtigste Information muss die größte sein. Frage deine Sitznachbarin oder deinen Sitznachbarn aus einem Meter Abstand: Was ist die wichtigste Information?

Kontrolle: Dein Gegenüber nennt ohne Zögern das Datum oder die Uhrzeit als Erstes. Alle Farben in deiner Datei sind Farbnamen.

Eine mögliche Lösung. Das Datum ist mit 44 px die größte Schrift, der Anmeldehinweis fällt durch Hintergrund und Fettdruck auf.

Bonusaufgabe 1 – Nur die Links in der Navigation

Bisher traf eine Regel wie a { ... } alle Links der Seite. Ein Nachfahrenselektor trifft nur Elemente innerhalb eines anderen: nav a meint alle Links, die irgendwo im nav stehen. Zwischen beiden Namen steht ein Leerzeichen.

Lege bonus-nachfahren.html an (Inhalt des body):

<header>
  <nav><a href="#">Start</a> <a href="#">Touren</a></nav>
</header>
<main>
  <p>Quelle: <a href="#">Wikipedia</a></p>
</main>
<footer>
  <a href="#oben">Nach oben</a>
</footer>

1. Gestalte die Links in der Navigation dunkelgrün und fett (nav a), den Link im Fußbereich grau (footer a).
2. Sage voraus: Welche Farbe hat der Link „Wikipedia“? Prüfe es.
3. Ergänze a { color: red; } ganz unten im Stylesheet. Welche Links werden rot? Warum nicht alle?

Kontrolle: Nur der Link im main wird rot.

Nach dem Ergänzen von a { color: red; } wird nur „Wikipedia“ rot: Die Regeln nav a und footer a enthalten zwei Elementnamen und gewinnen deshalb gegen a, auch wenn a weiter unten steht.

Bonusaufgabe 2 – Vererbung: Warum bleibt der Link blau?

Manche Eigenschaften, zum Beispiel color und font-family, werden vom Elternelement an alle Kinder vererbt. Dann reicht eine Regel für body.

Lege bonus-vererbung.html an (Inhalt des body):

<h1>Titel</h1>
<p>Text mit <strong>fett</strong> und einem <a href="#">Link</a>.</p>

1. Schreibe eine einzige Regel: body { color: darkgreen; }. Sage voraus, welche Teile grün werden, und prüfe es.
2. Ein Teil bleibt nicht grün. Der Browser bringt für ihn eine eigene Regel mit, die gegen die Vererbung gewinnt. Finde in den Entwicklerwerkzeugen heraus, welcher Teil das ist.
3. Mit dem Wert inherit sagst du „nimm den Wert des Elternelements“. Mache auch diesen Teil grün, ohne eine Farbe zu wiederholen.

Kontrolle: Erst ist nur der Link blau, nach deiner Ergänzung ist der ganze Text grün.