eute möchte ich mich mit den Grundlagen der Formatierung von HTML- Elementen beschäftigen. Das Zauberwort heißt CSS – die Abkürzung von Cascading Style Sheets. Damit ist eine textbasierte Formatierungssprache gemeint mit das Aussehen von HTML- Elementen beeinflusst werden kann.
Bedeutung von CSS
CSS sind Vorlagen, um die Ausgabe von HTML- Dokumenten beliebig zu gestalten. Dabei bedeutet Cascading soviel wie Verschachtelung (Kaskadierung), um Elementeigenschaften zu vererben.
Neben der Möglichkeit Schriftarten und Farben einzustellen, kann mittels CSS z. B. auch die Position von Elementen bestimmt werden. Auf diese Weise kann das Layout einer Seite von dem eigentlichen Inhalt (das zwischen den <body>-Tags) getrennt werden. Damit wird auch die Erweiterbarkeit erhöht, denn es ist einfach möglich ein altes CSS- Layout mit einem Neuen zu ersetzen ohne die HTML- Seite anzufassen.
1996 wurde CSS Level 1 Recommendation (CSS 1) vom World Wide Web Consortium (W3C) veröffentlicht. Es folgte 1998 CSS 2 und seit 2000 wird an CSS 3 gearbeitet.
Wurde die Anforderungen von CSS 1 noch von allen Browser unterstützt, wird bereits CSS 2 von einigen Browsern nicht korrekt dargestellt. Die Folge ist, dass sich verschiedene Browser bei der gleichen CSS- Anweisungen unterschiedlich verhalten. Was einem Webentwickler desöfteren graue Haar beschert und meist mit sog. CSS- Hacks umgangen wird, um bei allen Browsern ein gleichmäßiges Aussehen zu erreichen.
Aufbau von CSS
In diesem Abschnitt möchte ich erklären, wie man CSS- Code in eine HTML- Seite einfügen kann und wie die Anweisungen aufgebaut sein müssen um ein Element oder mehrere Elemente zu formatieren.
Einbindung von CSS- Code:
Die CSS- Formatierung einer HTML- Seite kann auf 2 Arten erfolgen:
Entweder direkt in der jeweiligen Seite, dann wird der entsprechende CSS- Code innerhalb des HTML- Seite des <head>-Tags eingefügt oder
alternativ als externe Datei. Dabei handelt es sich um eine normale Textdatei mit der Endung .css. Dieses Vorgehen ist vor allem bei großen CSS- Codes vorteilhaft, da die HTML- Seite mit ausgelagertem CSS- Code deutlich übersichtlicher ist.
Groß- und Kleinschreibung ist bei CSS egal, aber es werden keine deutschen Umlaute unterstützt.
Eine CSS- Datei kann auch Kommentare enthalten, diese werden durch /* und */ eingeschlossen. Einzeilige Kommentare können mit // dargestellt werden.
Referenzierung von HTML- Elementen:
Um ein Element (z. B. einen Absatz <p>) oder eine Menge von Elementen (z. B. viele Absätze) zu formaiteren, gibt es die Einteilung in id und class.
Zugriff auf einzelne Elemente = „id“:
Mit einer ID kann man genau 1 Element identifzieren, d. h. es darf im gesamten HTML- Dokument nur 1x vorkommen. Das entsprechende HTML- Element erhält dann das Attribut „id“ mit dem jeweiligen Namen der ID.
Beispiel: <p id=“absatz1″>Ich bin ein Absatz, der durch die ID „absatz1“ referenziert wird.</p>
Zugriff auf mehrere Elemente (des gleichen Typs) = „class“:
Eine Klasse kann bei mehreren Elementen gesetzt werden, um somit eispielsweise alle Absätze zu gestalten. In den betreffenden HTML- Elementen wird im „class“- Attribut der Klassenname angeben.
Beispiel: <p class=“absaetze“>Erster Absatz, der fett ist</p> <p class=“absaetze“>Zweiter Absatz, der fett ist</p>
Syntax von CSS:
Im CSS- Code werden einzelne Elemente (id) durch eine Raute (#) referenziert. Auf viele Elemente (class) wird hingegen mit einem Punkt (.) zugegriffen.
Eingeschlossen werden die Element- Anweisungen durch geschweifte Klammern „{…}“.
Einzelne Anweisungen werden durch ein Semikolon (;) voneinander getrennt. Zeilenumbrüche sind nicht zwingend notwendig, jedoch erhöhen Sie die Lesbarkeit des CSS- Codes. Dadurch kann der Code auch einfacher nachvollzogen werden.
So sieht das aus:
p#absatz1 { font-size:15px; font-color:#FF0000;}
p.absaetze {font-weight:bold;}
Verwendung von CSS am Beispiel:
Es folgt ein Beispiel, dass die grundlegenden Funktionsweise von CSS erklären soll.
Jetzt folgt der zugehörige HTML- und CSS- Code und zwar nur der relevante Teil der HTML- Seite (der CSS- Code kommt zwischen die <head>- Tags).
Download: Hier kann das Beispiel der HTML- Seite heruntergeladen werden.
Auf die Erklärung der einzelnen CSS- Anweisungen möchte ich nicht näher eingeben, sondern auf andere Websites verweisen.
Ressourcen zum Thema CSS
Wer jetzt Lust hat, seine Seiten mit CSS zu formatieren und so eine bessere Struktur aufzubauen, dem möchte ich folgende Websites mit nützlichen Infos nicht vorenthalten.
Gute Übersicht zu den einzelnen CSS- Anweisungen mit der Info, was bei welchem Browser funktioniert und was nicht
Deutsche Übersetzung des engl. Tutorials „CSS tutorial starting with HTML + CSS“ vom W3C