Gestalte deine Seite

Jetzt bist du an der Reihe: Du schreibst das ganze Stylesheet selbst.

Deine Seite oder unsere? Im Editor findest du wieder unsere Seite des Katzenhauses. Wenn du lieber deine eigene Seite aus dem HTML-Kurs gestalten möchtest, markiere den ganzen Code in index.html und füge den Code deiner Seite darüber ein. Oben in style.css steht unser Beispielplan: Ersetze ihn durch deinen.

Die Anweisungen sind eine Checkliste von allem, was dein Stylesheet enthalten muss, und sie werden von oben nach unten geprüft: Bei jedem Klick auf „Ausführen“ stoppen die Prüfungen beim ersten Punkt, der noch nicht erledigt ist. Du kannst deinen Code also jederzeit ausführen, um zu sehen, welcher Punkt als Nächstes kommt. Die Prüfungen betrachten nur, welche CSS-Funktionen du verwendest und dass sie Elemente deiner Seite gestalten, nie die konkreten Farben, Schriften oder Größen.

Text und Farben. Verknüpfe zuerst style.css mit der Seite. Beginne dann mit der Regel für body: der Schrift, der Textfarbe und der Hintergrundfarbe. Die Elemente in body erben die Schrift und die Textfarbe, diese eine Regel verändert also die ganze Seite. Für eine Webschrift wähle eine Schrift auf Google Fonts, lass dir von der Seite den Einbettungscode zeigen („Get embed code“) und kopiere die link-Elemente in head, genau wie in der Lektion über Text und Schriften. Gib Schriftgrößen in rem an, damit sie die Textgröße respektieren, die der Besucher im Browser eingestellt hat.

Boxen und Abstände. Die Regel * { box-sizing: border-box; } sorgt dafür, dass die Breite jedes Elements sein Padding und seinen Rahmen einschließt, sodass sich Größen leichter berechnen lassen. Text, der über die ganze Breite eines breiten Bildschirms läuft, ist schwer zu lesen, setze den Inhalt also in eine Spalte in der Mitte der Seite. Verwende dafür diesmal max-width (die maximale Breite) statt width: Das Element ist so breit, wie Platz da ist, aber nie breiter als der angegebene Wert. Auf einem großen Bildschirm wird daraus eine schmale Spalte, und auf einem Handy schrumpft sie auf die Bildschirmbreite.

main {
	max-width: 50rem;
	margin: 0 auto;
}

Ist die Vorschau schmaler als die max-width, füllt die Spalte sie einfach aus. Füge dann Abstände hinzu: padding innerhalb der Boxen, etwa des Kopfbereichs oder der Karten, und margin zwischen ihnen. Abgerundete Ecken (border-radius) geben Karten, Knöpfen oder Bildern ein weicheres Aussehen.

Klassen. Auf unserer Seite haben die Karten die Klasse karte, und das Element, das sie enthält, hat die Klasse karten. Wenn du deine eigene Seite gestaltest, füge Elementen, die ein eigenes Aussehen bekommen sollen, das Attribut class hinzu.

Layout. Flexbox ist für Elemente in einer Zeile gedacht, etwa die Links der Navigation, und das Grid für Zeilen und Spalten gleichzeitig, etwa die Karten. Hat deine eigene Seite nichts dergleichen, füge es hinzu: zum Beispiel eine nav im header mit Links zu den Teilen deiner Seite oder ein paar kurze Boxen (div-Elemente mit einer Klasse) mit Fakten zu deinem Thema. Mit Flexbox kannst du auch die Teile des Formulars aus dem HTML-Kurs in eine Zeile setzen.

Der letzte Schliff. Lass zum Schluss etwas passieren, wenn die Maus darüber ist, zum Beispiel bei den Links oder den Karten.

Tipp: Dein Code wird nicht gespeichert, wenn du diese Übung verlässt. Wenn alles abgehakt ist, sichere ihn: Lege auf deinem Computer einen Ordner an und speichere in einem Texteditor den Code von index.html darin als Datei index.html und den Code von style.css als Datei style.css. In der nächsten Übung erfährst du, warum beide Dateien im selben Ordner liegen müssen und wie du die Seite öffnest.