Hallo, CSS Welt!

Nachdem wir nun CSS einmal kurz vorgestellt haben und auch Gründe genannt wurden, warum man CSS nutzen sollte, kann man es wahrscheinlich kaum erwarten das ganze einmal in Aktion zu sehen. Während man den Text hier im Webbrowser liest kann man schon die Magie von CSS sehen -von den Farben und Größen der Überschriften, Menüs, Listen und eigentlich auch alles andere -wenn es einen Hintergrund gibt, eine Umrahmung eine andere Textgröße oder -farbe -dann ist es wahrscheinlich CSS. Aber wie auch immer, das könnte momentan noch etwas zu erschlagend sein, also fangen wir mal ganz unten an.

Im Laufe der Geschichte hat jedes Tutorial, das etwas auf sich hält, mit einem "Hello, world" Beispiel angefangen. Immer mit dem einfachen Hintergrund die Worte "Hello, world" auf dem Nutzerbildschirm anzuzeigen. Das könnte natürlich sehr einfach in purem HTML dargestellt werden, ganz ohne die Nutzung von CSS, darum werden wir das ganze mit ein wenig Farbe versehen:

<style type="text/css">
h1 {
	color: DeepSkyBlue;
}
</style>

<h1>Hello, world!</h1>

Das ist auch schon alles -wir haben unsere erste CSS Regel geschrieben, mit dem Ziel das H1 Tag mit einer anderen Textfarbe zu versehen. Gemacht haben wir das in dem wir der color Eigenschaft den Wert DeepSkyBlue zugewiesen haben. Man kann sich das Ergebnis anschauen indem man sich den Code kopiert oder indem man einfach im Beispiel auf die Schaltfläche "Try this example!" klickt.

Zusammenfassung

Wie man sehen kann ist CSS eine sehr einfache Sprache. Und keine Angst wenn noch nicht alles aus dem ersten Beispiel verstanden ist, wir werden den genannten CSS Code noch genauer besprechen, was er eigentlich bedeutet und warum er so geschrieben wird wie er geschrieben wird.