style-sheets.de hat Anfang 2004 einen kompletten Relaunch hingelegt. Viele neue und die meisten alten Inhalte sind nun im neu strukturierten CSS-Guide zu finden.
Diese Seiten enthalten daher unter Umständen veraltete Inhalte. Sie werden jedoch aus historischen Gründen und zur Vermeidung von toten Links auch bis auf weiteres online bleiben.
In einem Satz erklärt: Cascading Style Sheets erlauben es dem Author (und auch dem Leser) HTML-Dokumente mit Formatierungen (zum Beispiel Schriftart, Farbe und Rahmen) zu versehen. Das setzt natürlich voraus, dass Sie sich mit HTML auskennen. Ist das nicht der Fall sollten Sie sich eine der vielen Dokumentationen zu HTML ansehen. SelfHTML ist wohl die Beste.
Um zu sehen wie CSS in HTML eingreift sehen Sie hier den Quelltext einer einfachen HTML-Seite:
<!-- Dateiname: beispiel.html --> <html> <head> </head> <body> <h1>Überschrift</h1> <p>Fließtext bzw. Absatz</p> </body> </html>
Die Kommentare sind nur informativ. Sie fungieren entweder als zusätzlicher Hinweis im Quelltext oder, wie in Zeile eins um die Datei zu benennen (wichtig bei Verknüpfung von Dateien). Kommentare beginnen in HTML mit <!-- dann folgt der Kommentar und enden mit -->. In CSS sind Sie in Form von /* Kommentar */ augebaut.
In diesem Quellcode haben Sie jetzt vier HTML-Elemente, die Sie formatieren können: <html>, <body>, <h1> und <p>.
Um dem Browser mitzuteilen welches dieser HTML-Element angesprochen wird bedient man sich dem Selector, der in der Regel (außer bei Klassen oder ids) genau so heißt wie das Element, das man formatieren möchte. Um zu bestimmen, was mit dem Element passiert gibt man die Eigenschaft an und versieht diese dann noch mit einem Wert. Im folgenden Beispiel sehen Sie wie sich alles zusammensetzt.
H1 { font-size: 12px; }
--
Selector
---------
Eigenschaft
----
Wert
----------------
Deklaration
-----------------------
Regel
Nur Zeile 1 ist Quelltext, der Rest ist Erklärung. Diese Regel veranlasst den Browser die Überschrift Klasse 1 mit einer Schriftgröße von 12px zu rendern. Prägen Sie sich gut ein, welcher Teil welchen Namen trägt, da sie ab jetzt nur noch so bezeichnet werden.
Wenn Sie mehrere Deklarationen für eine Element einsetzten wollen können Sie sie hintereinander schreiben:
H1 { font-size: 12px; font-weight: bold; }
Um die Regeln mit dem HTML-Dokument zusammenzubringen haben Sie drei Möglichkeiten: Die erste ist, eine separate Datei (Endung: .css) zu erstellen, die Sie dann von jeder HTML-Seite aufrufen. In dieser Datei stehen dann die Formatierungen, die im ganzen Projekt quasi "global" gelten. Also Fliestextgröße, Überschriften... Um auf nur einer Seite etwas zu formatieren kann man einen Style-Sheet im "<head>-Bereich" der HTML-Datei plazieren. Wenn Sie allerdings nur ein einzelnes Tag verändern wollen können Sie das direkt in diesem Tag vornehmen. Das ist auch der “Cascading”-Aspekt von Style Sheets:
 |
Art der Einbindung: |
Geltungsbereich: |
Priorität vor: |
 |
Separate CSS-Datei |
Global (alle Dateien, die dieses Style Sheet einbinden) |
- |
||
Einbindung in den "<head>-Bereich" |
Nur in der HTML-Datei |
Separate CSS-Datei |
||
Einbindung in ein einzelnes HTML-Tag |
Nur in dem "gestylten" Tag |
Separate CSS-Datei, Einbindung in den "<head>-Bereich" |
Um eine separate CSS-Datei einzubinden müssen Sie zwei Dateien erstellen. Zuerst einmal eine namens "test.html". In die sollten Sie dann folgendens hineinschreiben (ohne die Zeilennummern):
<!-- Dateiname: test.html --> <html> <head> <title>Grundgerüst einer HTML-Datei</title> <meta name="author" content="Steffen Wenzel"> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <h1>Überschrift</h1> <p>Fließtext, nichts als Fließtext</p> </body> </html>
Wenn Sie zwar mit HTML vertraut sind aber mit Style Sheets bisher noch gar nichts anfangen konnten, wird Ihnen die Zeile mit <style type="... Rätsel aufgeben. Sie veranlasst den Browser die Datei “test.css” aufzurufen und als Style Sheet einzubinden.
Falls Sie beim späteren “Echteinsatz” Ihr CSS-Dokument in einen separaten Ordner ablegen wollen, müssen sie den Verweis abändern. Beispiele:
Fall 1: Gleicher Ordner
Folglich müsste der Verweis wie im Beispiel oben heißen:
<link rel="stylesheet" type="text/css" href="test.css">
Allgemein: Befinden sich beide Dateien im gleichen Ordner, wird einfach nur der Name der Datei anstatt von test.css angegeben. Sonst gar nichts.
Fall 2: Verweis zu tieferem Ordner
Hier müssen Sie den Verweis umschreiben und zwar in:
<link rel="stylesheet" type="text/css" href="include/test.css">
Allgemein: Einfach den weiteren Pfad von der HTML-Datei aus.
Fall 3: Verweise zu übergeordneten Ordnern
Der Verweis heißt also:
<link rel="stylesheet" type="text/css" href="../include/test.css"
Allgemein: Mit ".." in das vorherige Verzeichnis wechseln und dann weiter wie in Fall 2.
Als nächstes erstellen Sie eine Datei namens "test.css", in die Sie folgendes schreiben (wieder ohne Zeilennummnern):
/* Dateiname: test.css */
P, H1 {
font-family: Tahoma, Verdana, sans-serif;
}
P {
font-size: 10pt;
line-height: 15pt;
}
H1 {
color: #ff7c00;
font-size: 16pt;
line-height: 16pt;
letter-spacing: 0.4em;
}
Wenn Sie CSS-Tags in eine eigene Datei schreiben, müssen Sie dem Browser mitteilen, welche Anweisungen zu welchen HTML-Tags gehören. Um dies zu tun schreiben Sie erst das HTML-Element als Selektor (P oder P, H1) groß, Leerzeichen, geschweifte Klammer, neue Zeile, einrücken, Deklaration (mit Strichpunkt!), neue Zeile, geschweifte Klammer zu.
Eine externe CSS-Datei wird auf keine Fall mit einen HTML-Kommentar (<-- -->) eingeschlossen.
Diese Schreibweise ist anfangs leichter zu lesen. Wenn Sie rutinierter werden können Sie die Datei verkleinern, indem Sie sie so aufbauen:
/* Dateiname: test.css */
P, H1 { font-family: Tahoma, Verdana, sans-serif; }
P { font-size: 10pt; line-height: 15pt; }
H1 { color: #ff7c00; font-size: 16pt; line-height: 16pt; letter-spacing: 0.4em; }
Wenn Sie beides abgespeichert haben sollte die Datei test.html so aussehen:
