So funktioniert CSS

16.12.2010 09:00:00
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

Inhalte auf Webseiten sind das eine – Texte, Bilder, Überschriften, Absätze, werden in HTML hinterlegt. Für die Gestaltung dieser Elemente sind jedoch die Cascading Style Sheets, kurz CSS, zuständig. Hier werden beispielsweise Schriftgrößen, Farben, Schriftschnitt und Abstände festgelegt. Vorgenommen werden diese Definitionen in einem speziellen Editor.

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.

Übersicht Druckprodukte
  • zahlreiche Produkte im Digital- und Offsetdruck

  • umfangreiches Sortiment in der Werbetechnik

  • Rollenoffset Produkte für große Auflagen
  • 100% klimaneutral
Produkte finden
Wir helfen Ihnen weiter!
SIE BENÖTIGEN HILFE BEI DER DRUCKDATENERSTELLUNG?
Wir helfen Ihnen gerne bei der Erstellung Ihrer Druckvorlagen.
Auf unserer Serviceseite haben wir viele nützliche Hinweise dazu zusammengefasst.
SIE HABEN IHR WUNSCHPRODUKT NICHT GEFUNDEN?
Sollten Sie spezielle Anforderungen an ein Produkt haben, richten Sie bitte eine Anfrage an unser Service-Team. Gemeinsam finden wir die richtige Lösung für Sie!