Einführung in CSS

Willkommen im CSS-Kurs! Im HTML-Kurs hast du Webseiten gebaut und gelernt, dass HTML beschreibt, was auf einer Seite steht: Überschriften, Absätze, Listen oder Bilder. Wie die Seite aussieht, ist die Aufgabe einer anderen Sprache: CSS. Mit CSS wählst du Farben und Schriften, fügst Hintergründe und Rahmen hinzu, legst die Abstände zwischen Elementen fest und ordnest sie auf der Seite an, zum Beispiel in Spalten.

CSS steht für Cascading Style Sheets:

• Ein Style Sheet ist eine Liste von Regeln, die beschreiben, wie ein Dokument aussehen soll, zum Beispiel: „Alle Überschriften der zweiten Ebene sind braun“. Deshalb nennt man eine Datei mit CSS-Code ein Stylesheet.
• Cascading (kaskadierend) beschreibt, wie CSS entscheidet, welche Regel gewinnt, wenn mehrere Regeln dasselbe Element gestalten, zum Beispiel wenn eine Regel sagt, dass eine Überschrift braun sein soll, und eine andere, dass sie blau sein soll. Diesen Entscheidungsprozess nennt man die Kaskade, und du lernst sie in der nächsten Lektion über Selektoren kennen.

Sieh dir den Editor an. Die Datei index.html enthält die Seite über Katzen, die du aus dem HTML-Kurs kennst. In der Vorschau ist sie nur schwarzer Text auf weißem Hintergrund, weil die Seite noch keine Stile hat. In der zweiten Datei, style.css, haben wir ein Stylesheet für sie vorbereitet. Mach dir keine Sorgen, wenn du es noch nicht verstehst: Am Ende des Kurses kannst du selbst eines wie dieses schreiben.

Damit der Browser das Stylesheet verwendet, muss die Seite darauf verweisen. Das erledigt das Element link im Kopf der Seite, dem Element head:

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

Das Attribut rel (kurz für „relationship“, Beziehung) sagt, dass die verlinkte Datei ein Stylesheet ist, und das Attribut href sagt, welche Datei es ist. Wie meta hat das Element link kein schließendes Tag. Am Ende dieser Lektion sehen wir es uns genauer an.