Cascading Style Sheets dienen zur Formatierung, also bestimmen von Farbe, Schriftart und Schriftgröße von HTML-Dokumenten und sind mittlerweile auf jeder halbwegs ambitionierten Website zu finden. Das hat seinen Grund: CSS ist einfach, billig und trotz der Schlichtheit brilliant. Diese Dokumentation hat das Ziel Ihnen all das Wissen zu vermitteln welches Sie brauchen um selbst ein komplettes Stylesheet für Ihre Website zu erstellen.
Lesen Sie die Doku am besten komplett wie ein Buch durch, und wenn Sie sie später als Nachschlagewerk benutzten wollen, kommen Sie über den Index am schnellsten an's Ziel. Der Index fungiert als Hauptnavigationselement, da ich keine große Spalte dafür reservieren wollte und die Navigation in kleine Symbole verpackt habe, die Sie sich sicher schnell einprägen können.
Auf der Website dieses Projekts http://www.style-sheets.de/ werden Sie über die Entwicklung und über Neuerungen auf dem Laufenden gehalten.
Die Navigation wurde betont simpel gehalten und besteht aus den folgenden sechs Icons:
|
Index: Übersicht über die komplette Dokumentation |
|
eMail an den Autor |
|
Weiter zur nächsten Seite |
|
Zurück zur vorherigen Seite |
 |
Zum Seitenanfang |
|
Link zu www.style-sheets.de |
Separating Style from Content bedeutet die Formatierung, also die visuelle Präsentation vom Inhalt zu trennen. Man macht also nichts anderes als zu den Anfängen als man über HTML nur die Struktur der Texte bestimmte. Das ist eine Überschrift, das ist ein Absatz und das ist eine Auflistung. Um die Präsentation kümmerte sich der Browser, der bestimmte was in welcher Schriftart und welcher Farbe dargestellt wurde bzw. der Benutzer der die Standard-Werte des Browser in engen Grenzen (Schrift größer oder weiß auf schwarz anstatt schwarz auf weiß) verändern konnte.
Mit der Zeit wurde das allerdings aufgeweicht. So gab es am Anfang nur das <em>-Tag um einen Textabschnitt hervorzuheben. Es sagt nur aus, dass das Wort hervorgehoben werden soll und es ist dem Browser bzw. dem Leser überlassen wie er es hervorgehoben haben will. Irgendjemand (wahrscheinlich ein übereifriger Browserentwickler) ist dann auf die Idee gekommen das <i>-Tag (und anderen Kram gleicher Abart) zu erschaffen um den Text kursiv d darzustellen. Abgesehen davon dass kursiver Text auf dem Bildschirm aufgrund der (noch) relativ geringen Auflösung schlecht zu lesen ist, sagt es aus, wie der Text der sich zwischen dem Anfang- und dem End-Tag befindet darzustellen ist und nicht welche Bedeutung er hat, was er also ausdrückt. Man sagt dem Browser nicht "Beton´ mich!" sondern "Mach´ mich schräg!".
Die Krönung der HTML-Verwässerung ist das <font>-Tag. An diesem Element erkennt man auch den Vorteil dieser Technik am besten. Eine (für das font-Tag) ordentliche Definition von Schriftart, Farbe und Größe kommt pro Einsatz auf 80 Bytes. Hat man jetzt pro Seite drei Überschriften und zwanzig Absätze oder Zellen und bei einem größeren Projekt 50.000 Seitenaufrufe hat man über 11 Gigabyte Traffic die man durch die Einbindung einer externen CSS-Datei und einer einzigen CSS-Regel ersetzten kann.
Sie benötigen einen Texteditor um HTML- und CSS-Dateien bearbeiten und einen (oder mehrere) Browser um den Code testen zu können.
Kostenlose Texteditoren gibt es zur genüge. Um Websites komplett und komfortabel zu erstellen gibt es die beispielsweise den Ulli Meybohm´s HTML-Editor Phase 5 oder Scribe!. Wollen Sie nur schnell einen Blick in den Quellcode werfen empfehle ich Ihnen Metapad.
Im Idealfall sollten Sie alle drei großen Browser in einer möglichst aktuellen Version zur Verfügung haben. Internet Explorer, Opera und Netscape. Alternativ zu Netscape empfehle ich Ihnen Mozilla, auf dem der Netscape Browser basiert. Er ist umgänglicher und immer ein Stück weit aktueller. Alle Browser sind kostenlos auf den jeweils angelinkten Websites oder von jeder zweiten Magazin-CD zu bekommen.
Obwohl CSS wirklich einfach ist kommt man um einige Fachwörter nicht herum. Ich habe versucht passende deutsche Begriffe zu finden, was mir allerdings nicht überall gelang. In Klammern stehen die Originalausdrücke, wo ich keine Übersetztung finden konnte decken sich beide Begriffe natürlich.
Attribut (attribute): HTML Attribut (z.B.: align="center" oder auch class="groß")
block-level element (block-level element): Ein Element, das einen Zeilenumbruch am Anfang und am Ende hat (H1, P)
child element (child element): Subelement in HMTL (H1 und P sind child elements von BODY; Wenn P innerhalb eines DIVs steht ist es ein child element und übernimmt dessen Eigenschaften)
Deklaration (declaration): Eine Eigenschaft (z.B.: font-size) und der dazugehörige Wert (z.B.: 12px)
Dokument (dokument): HTML Dokument
Element (element): HTML Element (BODY, H1, DIV)
inline element (inline element): Ein Element, das keinen Zeilenumbruch am Anfang oder Ende hat (z.B.: em)
parent element (parent element): Ein Element, das andere Elemente enthält (siehe child element)
Pseudo-Element (pseudo-element): Erweitert Elemente um typhgraphische Informationen (z.B.: first-line)
Pseudo-Klasse (pseudo-class): Kümmert sich um erweiterte Informationen von Elementen (z.B: hover)
Eigenschaft (property): Eigenschaft (z.B.: font-size) eines selectors (z.B.: P)
Regel (rule): Ein selector (z.B.: H1) und die dazugehörige Deklaration (z.B.: font-size: 12px)
Selector (selector) Zeichenfolge, die bestimmt, welches Element mit einer Regel angesprochen wird
Shorthand-Eigenschaft (shorthand property) Zusammenfassung mehrerer Eigenschaften, die zu einer Kategorie gehören (z.B. font, background oder padding)
Contextual Selector (contextual selector) Ein Selector, der sich auf Elemente nach ihrer Position im Dokument bezieht. Er besteht aus mehreren Simple Selectors. (z.B.: Der Contextual Selector TD PRE bezieht sich nur auf PREs innerhalb einer Tabelle.
Simple Selector (simple selector) Ein Selector der sich auf Elemente nach ihrem Namen und/oder nach ihrem Attribut bezieht (z.B.: P oder DIV.navigation)