CSS steht für Cascading Style Sheets, was übersetzt werden kann mit »stufenförmige Stilvorlagen«. Stufenförmig bedeuteet, dass die Stilvorlagen eine hierarchische Reihenfolge abbilden, die dem Browser vorgibt, wie die Vorlagen angewendet werden sollen. Insgesamt sind CSS mit Stilvorlagen aus Layoutprogrammen vergleichbar, bis auf die Ergänzung, dass sie ineinander stufenförmig verschachtelt werden können. CSS dient der Gestaltung von Websites. Da Formatierungen und Layoutoptionen in XHTML eher begrenzt sind, muss auf CSS zurückgegriffen werden, sobald Elemente auf einer Site exakt positioniert und vom Standard abweichende Textformate verwendet werden sollen.
Aufbau
Der Selektor bildet die Verbindung von CSS zu HTML-Tags. Mittels der Kennung werden die in der Deklaration folgenden Beschreibungen auf Tags und Elemente bezogen.
Auf den Selektor bezieht sich der zweite Teil, die Deklaration in den geschweiften Klammern { ... } Vereinbarung (Declaration), wie was aussehen soll. Im Beispiel unten werden alle Überschriften h1 die Farbe rot bekommen.
Eigenschaften und Werte
Die Vereinbarung (Deklaration) besteht aus zwei Teilen:
• dem Eigenschaftsteil, wie z. B. Farbe, Größe, und
• dem zugeordneten Wert, wie Farbe, Größe, Schnitt einer Schrift oder Positionen eines Elements.
Selektoren
Es gibt vier grundsätzliche Selektoren, die unterschiedlich kombiniert werden können:
• Universalselektor *
• Typselektor, z.B. h1
• ID-Selektor, z.B. #content
• Klassenselektor, z.B. .leftcolumn
Einige Kombinationsmöglichkeiten:
• Gruppenselektoren, z.B. h1, h2, h3
• Nachfahrenselektoren, z.B. #content ul li
• Einfacher Attributselektor, z.B .img[alt]
Die Schreibweise:
Selektoren sind case-sensitiv, die Groß-/ Kleinschreibung muss unbedingt eingehalten werden.
Selektoren dürfen nicht mit einer Zahl oder einem Sonderzeichen beginnen.
Das Element des Selektortyps muss vorhanden sein, bzw. der Selektor muss als Klasse oder ID gekennzeichnet sein.
Pseudoklassen
Linkelemente fallen in die Kategorie der Pseudoklassen, die Zustände :hover, :link, :focus, :visited und :active sind zu definieren.
:link definiert den normalen Zustand von <a>
:visited formatiert einen besuchten Link
:hover formatiert den Link bei MouseOver
:focus formatiert ein Element das den Fokus hat (z.B. Formularfelder)
:active formatiert den geklickten Link
Die Schreibweise:
a:link, a:visited{color: #CC0000;}
a:hover {color: #000;}
Block-Elemente und Inline-Elemente
Blockelemente werden oft mit Boxen verglichen, in die verschiedene Inhalte gelegt werden können. Blockelemente können untereinander oder nebeneinander positioiert werden, sie erhalten eine feste oder flexible Breite und die Abstände von Boxen können nach Innen und Aussen festgelegt werden.
Einige Elemente:
div • form • h1-h6 • hr • p • ul • table
Inline-Elemente sind den Block-Elementen untergeordnet und benötigen stets ein Block-Element um sich herum. Sie fließen nebeneinander und erzeugen keinen Absatz. Nur einigen Inline-Elemente können Maße zugeordnet werden (img, button) und Abstände können nur nach links und rechts, nicht aber oben und unten definiert werden.
Einige Elemente:
a • button • img • input • label • object • textarea