CSS-Grundlagen

CSS - Cascading Style Sheets - ist eine Formatierungssprache, die unter anderem für die optische Gestaltung von HTML-Dokumenten verwendet werden kann. Mit Hilfe von CSS ist es beispielsweise möglich, das Aussehen von HTML-Dokumenten global zu definieren und somit die Wartung einer Homepage bei Designänderungen zu vereinfachen.

Die Formatierungsmöglichkeiten mit CSS sind sehr weitreichend. Eine der trivialsten Definitionen ist die Festlegung der Textfarbe. Aber auch das Einbinden eines Hintergrundbildes ist mit CSS möglich.

Eine CSS Anweisung ist immer noch dem gleichen Schema aufgebaut: Name der Eigenschaft durch einen Doppelpunkt getrennt vom zugewiesenen Wert. Zum besseren Verständnis folgen weiter unten noch Beispiele.

Um CSS Anweisungen in ein HTML Dokument einzubinden gibt es verschiedene Möglichkeiten. Drei hiervon werde im folgenden Abschnitt aufzeigen.

CSS Anweisungen direkt im Tag einbinden

Zum einen können Anweisungen mit dem style-Attribut direkt im HTML Tag eingefügt werden:

<a style="font-size: 18px;" href="http://de.wikipedia.org">Wikipedia</a>

In diesem Beispiel wird der Link zu Wikipedia mit einer Schriftgröße (font-size) von 18 Pixel ausgegeben.

Diese Möglichkeit der Einbindung wird oft von Anfängern gebraucht, ist allerdings nicht wirklich empfehlenswert, da so bei Änderungswünschen alle Attribute manuell angepasst werden müssen.

Einbindung der CSS Anweisungen im HTML Header

Eine weitere Möglichkeit der Einbindung besteht darin, die CSS Anweisungen direkt im HTML Header unterzubringen. Hierzu müssen die CSS Anweisungen durch den HTML-style Tag kenntlich gemacht werden:

<style type="text/css">
<!--
a {
    font-size: 18px;
}
-->
</style>

Dieses Beispiel erledigt genau die selbe Funktion, wie das vorangegangen Beispiel. Nur werden diesmal "alle" Links in diesem Dokument auf die Schriftgröße 18 Pixel gesetzt. Nachteil bei dieser Einbindungsart ist, dass bei Änderungen alle HTML Dokumente bearbeitet werden müssen.

CSS Anweisungen in einer externen Datei

Die am häufigsten verwendete Variante, stellt das Einbinden einer externen CSS Datei dar. Die Datei - in welcher die CSS Anweisungen gespeichert werden - ist eine einfache Textdatei, die üblicherweise mit der Endung .css gespeichert wird. Diese Datei wird dann in allen HTML Dokumenten, die mit diesen Anweisungen formatiert werden sollen, mit folgendem Tag eingebunden:

<link rel="stylesheet" type="text/css" href="anweisungen.css" />

Die CSS Datei kann mit einem Texteditor erstellt werden. Die Datei muss in diesem Beispiel den Dateinamen anweisungen.css erhalten und im selben Verzeichnis wie die HTML Datei(en) gespeichert werden:

a {
    font-size: 18px;
}

Der Vorteil dieser Variante ist, dass sich eine Änderung in der CSS Datei auf alle HTML Dokumente - die diese Datei einbinden - auswirkt. Somit muss jede Änderung nur einmalig vorgenommen werden.

Klassen und ID's in CSS

Um bei der Formatierung möglichst flexibel vorgehen zu können, ist der Einsatz von Klassen und ID's in CSS empfehlenswert. Mit Klassen ist es beispielsweise möglich, einen Link einer Klasse zuzuordnen und somit nur alle Links einer bestimmten Klasse zu formatieren. Man kann so z.B. alle Link nach wikipedia.org mit einer anderen Farbe einfärben. Hierzu setzt man im Link Tag <a> einfach das Attribut class und vergibt einen eindeutigen Namen:

<a class="wiki" href="http://de.wikipedia.org/wiki/Cascading_Style_Sheets">Roter Link zu Wikipedia</a>

Die zugehörige CSS Anweisung sieht wie folgt aus:

a.wiki {
    color:#FF0000;
}

#FF0000 ist der Hexadezimalwert für die Farbe Rot.

Übersicht mit Kommentaren schaffen

Zur besseren Übersicht ist abschließend noch die Möglichkeit, Kommentare zu setzen, zu erwähnen. Kommentare werden in CSS mit /* */ eingeschlossen:

/* Dies ist ein Kommentar */

/* Dies ist ein
   mehrzeiliger Kommentar */

Weiterführende Information und eine gute Referenz für CSS Anweisungen sind bei CSS 4 You zu finden.