Einstieg in CSS

Mit HTML alleine hat man kaum Einfluss darauf, wie eine Seite letzlich im Browser angezeigt wird. Man kann mit HTML lediglich die Struktur (Überschriften, Textblöcke, Zeilenumbrüche,...) beschreiben und natürlich den eigentlichen Text angeben. Das Design wird vollständig getrennt davon mithilfe einer CSS-Datei gestaltet. (CSS steht für Cascading Style Sheet.)

Ein erstes Zusammenspiel

Hier sehen wir eine typische CSS-Datei:

Man erkennt bereits, dass diese im Grunde recht simpel aufgebaut sind. Grundsätzlich muss man zunächst angeben, welchen Bereich man (oder besser: welches Tag) man genauer beschreiben möchte. In dieser Datei wird zuerst der gesamte Körper (body) beschrieben. Wie man vielleicht schon ahnt, wird mit background: darkred; angegeben, dass die Hintergrundfarbe Dunkelrot sein soll. Mit color: lightgray; wird die Textfarbe auf Hellgrau gesetzt.
Die weiteren Anweisungen sehen wir uns gleich an. Schauen wir erst einmal, wie diese CSS-Datei nun verwenden kann und wie das Ergebnis aussieht.

Möchten wir, dass eine HTML-Datei die in der CSS-Datei angegebenen Styles verwendet, so müssen diese verlinken. Das funktioniert mit einer Anweisung der Form <link rel="stylesheet" type="text/css" href="mein_style_01.css"> wobei man am Ende den Namen seiner CSS-Datei angeben muss. Wir gehen hier davon aus, dass sich diese Datei im selben Ordner wie die HTML-Datei befindet!
In dieser HTML-Datei wird sich auf die CSS-Datei mein_style_01.css bezogen:

Im Browser sieht das Ergebnis dann so aus:

Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!

Hier nochmal die CSS-Datei:

Neben dem Körper und dessen Hintergrund- und Schriftfarbe wurden noch die folgenden Elemente in der CSS-Datei gestaltet:

Übungsaufgabe

Erstelle eine HTML- und eine CSS-Datei, die zusammen eine solche Darstellung liefern:

Eine Beispielseite zum Nachbauen