Was ist CSS?

CSS ist die Abkürzung für Cascading Style Sheet und ist die primäre Sprache, wenn es um die Beschreibung von Aussehen und Formatierung einer Webseite, aber auch anderen Internetdokumenten (z.B. HTML und XML) geht.

Eine beschreibende Sprache wie HTML wurde ursprünglich einmal dazu designed eigene Informationen zur Formatierung und zum Aussehen bereitzustellen. Aber schon bald wurde klar, dass es mehr Sinn machen würde das ganze in zwei Layer zu unterteilen, nämlich einmal den Dokumenten Inhalt und zum anderen die Präsentationsebene. CSS erfüllt hierbei den letzgenannten Teil. Historisch gesehen kommen daher auch die HTML Tags wie font, mit dem einfachen Hintergrund die Schriftart, -farbe und -größe lokal auswählen zu können. Das wird heutzutage von CSS erledigt. Das erlaubt dem Entwickler auch seine Formate an mehreren Stellen einzusetzen und das nicht nur in einem Dokument, sondern über die ganze Webseite hinweg. Hier ein Beispiel um meine Ausführungen zu unterstützen, und keine Angst wenn nicht direkt alles von vorneherein klar ist, wir werden alles in diesem Tutorial noch behandeln und erklären.

Die alte Art einen Text zu formatieren, durch die Nutzung von HTML:

This is a piece of
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>text</b></i></font> with
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>highlighted</b></i></font> elements in
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>it</b></i></font>.

Ein moderner Ansatz mit CSS:

<style type="text/css">
.highlight {
	color: Blue;
	font-style: italic;
	font-weight: bold;
	font-size: 120%;
	font-family: Tahoma, Verdana, Arial;
}
</style>

This is a piece of
<span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.

Wie man sieht nutze ich das gleiche Regel-Set in mehreren HTML-Tags. Das ist schon ein großer Vorteil wenn man es dreimal nutzt, wie wir es hier im Beispiel machen, aber damit endet es noch nicht. Wenn man sein CSS in eine externe stylesheet Datei auslagert (mehr dazu später) kann man seine Regeln auf der kompletten Webseite verwenden. Und wenn man sich entscheidet, dass hervorgehobener Text nun rot und nicht mehr blau sein soll? Im ersten Ansatz müsste man jede Stelle im Markup suchen und entsprechend anpassen. Mit CSS hat man eine zentrale Anlaufstelle, nämlich die eine ".highlight" Regel, die überall Verwendung findet!

Zusammenfassung

CSS erlaubt einem sehr einfach Regeln zur Formatierung und zum Layout festzulegen und diese auf seine HTML Elemente zu binden. Zudem kann man diese Regeln immer wieder verwenden und das auf vielen Elementen und sogar auf seiner kompletten Webseite. In dieser kurzen Einführung haben wir ein wenig CSS Code gesehen, aber noch nicht darüber gesprochen wie genau und warum er genau so aufgebaut ist. Das werden die nächsten paar Kapitel aber erledigen, wo wir bei null anfangen und alles im Detail erklären.