Struktur und Inhalt einer Webseite wird seit je her durch HTML gesteuert. Um jedoch das Layout besser und konkreter bestimmen zu können, definierte man die Cascading Sytle Sheets, kurz CSS. Diese Sprache ist eine Erweiterung zu HTML und macht es dem Benutzer möglich, das Aussehen und den Style der Seite noch präziser Festzulegen.
Die Anfänge
CSS wird in der Regel in den Grundstamm von HTML eingefügt. Dieser beginnt immer mit <html> und endet mit <html>. IN der Mitte befinden
sich die Definitionen zu <head>, der Überschrift, und <body>, dem Hauptteil jeder Struktur.
Zudem benötigt jedes Dokument eine Dokumententyp-Deklaration, kurz DtD. Dadurch wird erreicht, dass die CSS-Befehle streng an den HTML-Baum angeknüpft wird. Der Beschreibung hierfür könnte zum Beispiel lauten:
<!DOCTYPE html PUBLIC „-//W3C//DTD HTML 4.01//EN“ „http://www.w3.org/TR/html14/strict.dtd“>.
Nach diesem Befehl folgt der HTML-Stamm. Im Head-Bereich des HTML-Codes muss genau definiert werden, dass hier eine CSS-Anwendung erfolgt. Dies geschieht ganz simpel über den Befehl
<style type=“text/css“>
</style>
In diesem Style-Abschnitt werden die CSS-Klassen genau definiert; dies erfolgt über CSS-Deklarationen. Dieser Deklaration besteht immer aus
einer Eigenschaft und einem Wert. Zuerst gibt man die Eigenschaft an; nach dem Doppelpunkt folgt dann der Wert der genauen Darstellung.
Farben zuweisen
Selektoren, Deklarationen und Anweisungen bestimmten die Farbe der Elemente. Der Selektor bietet die Verbindung zwischen HTML und CSS.
Bei mehreren Deklarationen können mehrere Selektoren grupiert werden; so wird ein neues definieren einzelner Deklarationen vermieden. Die
Selektoren trennt man durch Kommata. Eine Farbe für die Überschrift definiert man zum Beispiel folgendermaßen:
h1 {color: blue; }
Alle Befehle befinden sich in einer geschweiften Klammer; nach dem Befehl folgt ein Strichpunkt. In diesem Beispiel wurde der Überschrift
die Farbe Blau zugewiesen. Die Farben können auch als RGB-Wert via Hexadezimalzahl, zum Beispiel #000000 für Schwarz, bestimmt werden. Man kann auch eine Hintergrund – und Textfarbe gruppiert bestimmen:
h1 { background-color: yellow; color: blue; }
Diese Befehle werden in den Kopf der HTML-Datei eingefügt. Durch das Attribut „Style“ können Farben im HTML-Code für bestimmte
Elemente definiert werden. Eine Möglichkeit wäre zum Beispiel:
<p style=“color: red;“> Dieser Absatz wird nun in Rot dargestellt.</p>
Die Schriftbestimmung
Über font-family werden bei CSS die Schriftwarten bestimmt; zum Beispiel:
h1 {font-family: Arial; }
Um auch noch die Schriftgröße zu bestimmen, benutzt man den Befehl font-size. Diese kann prozentual, als Pixel- oder em-Wert angegeben
werden. Hier kann man befehlen:
h1 { font-size: 15px; } Dies ist ein Beispiel für eine Größenangabe in Pixel.
Hintergrundbestimmung
Den Hintergrund kann man mit einer einfachen Farbe, aber auch über ein Hintergrundbild schmücken. Eine einfache Hintergrundfarbe bestimmt man über
body {background-color: yellow; }
Dieser Hintergrund hätte nun die Farbe Gelb. Eine Hintergrundgrafik wird mit dem Hintergrundfarben-Befehl gruppiert; unter dem BG-Color-Befehl wird gesetzt:
background-image: url (../bilder/bild.jpg)
Diese Angabe bestimmt den Speicherort des Bildes, aus dem es geladen wird. Soll eine Grafik gekachelt werde, erfolgt dies über den zusätzlichen Befehl
background-repeat: repeat-y;
dies steht für das vertikale Kacheln. Soll horizontal gekachelt werden, ersetzt man das y durch ein x.
Hat man diese Grundbefehle einmal verstanden und kann sie problemlos anwenden, kann man sich auch an die schwierigeren Befehle des CSS wagen.
ID und Klassen
Zum Anwenden von CSS kann man als Selektor entweder IDs oder Klassen benutzen. Natürlich haben beide Varianten ihre Vor – und Nachteile. Klassen sind einfacher in der Handhabung, IDs sind aber spezieller; dafür dürften sie nur einmal im Tag vorkommen. Sie gelten als gewichtiger als Klassen. Sie überstimmen diese und kooperieren gut mit JavaScript.
Es wird also definiert:
<h1> Dies ist eine Überschrift </h1>
oder
<h1 ID=“rot“> Dies ist eine Überschrift </h1>
Subklassen
Mit Subklassen kann man Elemente einer Klasse über gemeinsame Regeln bestimmen. Über die Unterklassen werden Grundregeln einfach überschrieben. Bei CSS werden der Universalselektor, der Name der Klasse und der Punkteoperator zusammengefügt. Auf diesem Weg kann man die Klassen verketten – und das als unbegrenzte Anzahl. Zuerst werden die Basisklassen, dann die Subklassen aufgeführt; dadurch wird eine bessere Lesbarkeit gewährleistet.
Das Ganze könnte dann so aussehen:
*.class { SHARED_BASE_STYLES }
*.class.subclass.etc {SUBCLASS_STYLES }
Vererbung
Diverse Eigenschaften, zum Beispiel Schriftart oder -farbe, können vom Elternelement auf das Kindelement vererbt werden. Somit bekommt das
Kindelement alle Eigenschaften des Elternelementes. Die untergeordneten Elemente erben bei den relativen Angaben den berechneten Wert.
Diese Vererbung kann man durch das Definieren einer eigenen Form für das Kindelement vermeiden. Wird das Element im
Body-Bereich definiert, gilt diese Anwendung für das gesamte CSS-Dokument. Eine solche Vererbung kann folgendermaßen aussehen:
<style type=“text/css“>
body { color: blue; }
span { color: red; }
</style>
Alle untergeordneten Ebenen bekommen nun die Farbe Blau. Unter <span> definierte Elemente bekommen die Farbe Rot.
Abstände
Dem Boxmodell des CSS-Dokumentes kann über die Eigenschaften „margin“ und „padding“ ein Abstand definiert werden; dieser bezieht sich dann auf die Abstände zwischen Rahmen und INhalt, sowie umgebendem Inhalt und Rahmen. Bei einem gewünschten Abstand zwischen der Box und dem Inhalt kann über margin und padding auf einen Rahmen verzichtet werden. Die Angaben werden in den Body-Abschnitt eingefügt. Definiert werden kann der Abstand für oben, unten, links und rechts; dies passiert jeweils über margin-top, margin-bottom, margin-left und margin-right. Ein Beispiel:
<p style=
„margin-top: -24pt; margin-left: 7pt;“>
Hier entsteht ein Abstand. </p>
Hier wurde einen Abstand von links von 7 Punkten und einen Abstand von oben von 24 Punkten festgelegt.
Dies sollte für erste Schritte schon reichlich Stoff sein. Viele weitere CSS Anleitungen findet ihr auch auf: http://de.html.net/tutorials/CSS/