Cascading Stylesheets (kurz: CSS) sind eine für Webdesigner unverzichtbare Ergänzung zu HTML. Mit CSS lassen sich Formateigenschaften einzelner HTML-Befehle definieren, die aber in dieser Art mit der herkömmlichen Hypertext Markup Language nicht möglich sind.

Man kann die Eigenschaftswerte von normalen HTML-Tags bestimmen und ändern.

Mit Hilfe von CSS könnt ihr beispielsweise die Werte von Überschriften erster Ordnung bestimmen. Ihr könnt feststellen, wie die Schriftgröße und Schriftart ist. Ob die Überschrift kursiv oder fett erscheinen soll oder wie groß der Abstand zwischen Überschrift und dem darauffolgenden Absatz ist.

Cascading Stylesheets helfen, allgemeine Eigenschaftswerte zu vergeben und damit das Gestalten zu vereinfachen. Die Verwendung von CSS vereinfacht die Arbeit. Man muss nicht mehr umständlich Seite für Seite einzeln bearbeiten, um das gesamte Layout zu ändern.

Das ermöglicht das externe Speichern von Stylesheets als .css Datei, welche man innerhalb des head –Attributs im HTML-Dokument aufruft.

Insgesamt gibt es aber mehrere Möglichkeiten um CSS benutzen zu können.


1. Eingebettete Stildefinitionen

Mit dem Attribut style kann man Stile für ein bestimmtes Element definieren.

Um dieses Attribut zu verwenden, muss man es nicht extern abspeichern, sondern einfach einen Tag damit erweitern.

Hier ein Beispiel:

Code:


Somit hat man eine grüne Überschrift, die 36 pt (=Punkte) groß ist.

Man beachte den Strichpunkt am Ende jedes Wertes! Der letzte Wert kann jedoch auch ohne Strichpunkt angegeben werden. Dies ist optional und beeinträchtigt nicht die Funktion.

2. Eingebettete Stylesheets

Um Stylesheets nicht extern in einer anderen Datei speichern zu müssen, kann man sie auch im Kopf eines HTML-Dokuments definieren.

Hier ein Beispiel:

Code:



Zu dieser Variante rate ich eher ab, weil es doch mehr Sinn ergibt, sie extern zu speichern und man somit nicht jede Seite extra bearbeiten muss, wenn man auch nur eine kleine Änderung vornehmen möchte.

Aufbau einer Regel:

Ein Stylesheet besteht aus einer oder mehreren Regeln, die die Darstellung eines Seitenelements bestimmen. Im vorigen Beispiel haben wir die Darstellung der Überschrift festgelegt.

Code:


h1 nennt man den Selektor.

Hinter dem Selektor steht der Deklarationsblock,

also {color:green; font-size:36pt}.

Wobei dieser Deklarationsblock wiederum in Deklarationen aufgeteilt wird.

Die erste Deklaration ist color:green; und die zweite font-size:36pt; .


Jede Deklaration besteht aus Eigenschaft und Wert.

Die Farbe ist die Eigenschaft, welcher man einen Wert zuweist, also #00FF00 oder nur green. Das gleiche Schema gilt natürlich auch für die Schriftgröße und allen anderen Deklarationen.

3. Externe Stylesheets

Ein Code eines externen Stylesheets schaut beispielsweise so aus:

Code:


Um diesen Code nieder zuschreiben, könnt ihr den HTML Editor Phase 5.3 oder einfach nur den Texteditor verwenden.

Gebt der Datei die Endung .css und um dieses Stylesheet nun in HTML Datei einzubinden, verlinkt ihr es im Head der Datei.

Es gibt 2 Möglichkeiten, das Stylesheet einzubinden. Einmal als @import–Möglichkeit, was als Direktive dient, oder als Link–Element. @import wird jedoch nicht vom Internet Explorer unterstützt.

Hier ein Beispiel zu @import–Direktiven:

Code:


Hier ein Beispiel zu link-Elemente:

Code:



Ich hoffe, dass ich euch was beibringen konnte!
Mehr über CSS gibt’s im nächsten Tutorial!
Fragen/Anregungen bitte im Forum ...


Viele Grüße!

>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!