So funktioniert CSS

16.12.2010
Cascading Style Sheets dienen dazu, im Web Text zu gestalten. Dabei ist es sogar möglich, diese Gestaltung nach dem Ausgabemedium zu differenzieren. …mehr lesen

Wie sehen Cascading Style Sheets aus?

 Quelle: A. Reinkober Pixelio


Quelle: A. Reinkober
(Pixelio) Cascading Style Sheets funktionieren stets nach folgendem Muster:

Selektor { Eigenschaft: Wert; }: Der Selektor schafft die Verbindung zwischen HTML und CSS. Alle HTML-Elemente können auch als Selektoren fungieren. Die Eigenschaften müssen in geschweiften Klammern stehen. Sie weisen beispielsweise der Farbe des Elements einen Wert zu: Selektor { color: red; } setzt die Farbe auf „rot“. Die Reihenfolge: Zuerst das Attribut, dann der Wert, muss beibehalten werden. Man kann einem Element auch verschiedene Eigenschaften zuordnen, dabei ist die Reihenfolge egal. Meist werden Eigenschaften und Werte klein geschrieben.

Wie kommt CSS ins Dokument?

Die Cascading Style Sheets müssen in HTML eingebunden werden. Dazu gibt es mehrere Möglichkeiten: Man kann die Datei direkt in den Seitenkopf einer Webseite schreiben. Sie steht dann im Bereich „Head“. Das kann so aussehen
oder

Achtung: Ältere Browser wie zum Beispiel Netscape kennen den Befehl „@import“ nicht. Ähnlich dieser Variante funktioniert die Möglichkeit, CSS als Bereich direkt in den Seitenkopf einzubinden:

Des Weiteren kann man die CSS-Anweisungen als HTML-Tag festlegen, beispielsweise:

.... oder

....

 Quelle: Peter Kirchhoff Pixelio


Quelle: Peter Kirchhoff
(Pixelio)

CSS für Fortgeschrittene

Man kann die CSS-Anweisungen auch miteinander verschachteln – die Eigenschaften werden vererbt. Farben werden beispielsweise von übergeordneten Elementen übernommen, sofern sie keine eigene Farbe zugewiesen bekommen. Manche Attribute kann man daher für eine ganze Webseite definieren. Zum Beispiel so:

BODY {
  font-family: Verdana;
  color: black;
}

Das Attribut „media“ definiert verschiedene Ausgabestile für unterschiedliche Medien. Die Eigenschaft „print“ steht dabei für den Druck, „screen“ für Bildschirme, „tv“ für Fernseher. Eine CSS-Definition für den Druck könnte also wie folgt aussehen:

@media print {
  body {
    color: black;
    background-color: white
  }
  h1 {
    font-size: 14pt
  }
}

Was passiert, wenn die CSS fehlerhaft sind?

 Quelle: Markus Hein Pixelio


Werden die Cascading Style Sheets nicht richtig formatiert, passiert Folgendes: Bei einer unbekannten Eigenschaft geschieht schlicht nichts. Der Befehl wird übergangen und hat keine Auswirkungen. Auch falsche Werte, zum Beispiel Farben, die es nicht gibt, werden nicht ausgeführt. Wichtig ist auch, dass bei mehreren Eigenschaften zur Trennung ein Strichpunkt verwendet wird. Nur bei der letzten Eigenschaft kann man es weglassen. Daher werden folgende Eigenschaften auch nicht mehr berücksichtigt, sofern das Semikolon fehlt.

Werden Sie ein Teil unserer Welt!

Bestellen Sie unseren Newsletter und erhalten Sie Drucktipps, Angebote sowie Neuigkeiten aus der Druckbranche direkt per E-Mail.
Zusätzlich schenken wir Ihnen einen 5 EUR Gutschein für Ihre erste Bestellung.