Bitte warten...

Grundlagen

Während die semantische Auszeichnung der Inhalte eines Webprojekts über HTML realisiert wird, stellt CSS Funktionen für die grafische Formatierung der Inhalte bereit. Von einfachen Formatierungen wie Farbe, Schriftart, Schriftgröße etc. bis zum kompletten Layout einer Seite bietet CSS eine Vielzahl von Möglichkeiten zur optischen Gestaltung der Text- und Grafikinhalte. An dieser Stelle soll eine Enführung in die praktische Anwendung dieser Technik mit Beispielen aus der Praxis gegeben werden.

Noch wichtiger als beim Thema HTML ist die Überprüfung der Darstellung der verwendeten Funktionen in unterschiedlichen Browsern. Webseiten sollten daher mindestens in Webkit-Browsern wie Chromium, Gecko-Browsern wie Firefox und mit dem Internet Explorer getestet werden.

Grundsätzlich sollten sämtliche grafischen Eigenschaften eines HTML-Dokuments per CSS festgelegt werden. Man darf sich nie darauf verlassen, dass z. B. eine Schriftart, die der eigene Browser zur Darstellung eines Dokuments verwendet, auch auf einem anderen Rechner oder in einem anderen Browser verwendet wird. Jeder Browser hat für die Darstellung nicht definierter Eigenschaften ein eigenes, nicht standardisiertes Stylesheet, dessen Vorgaben erst durch die eigenen expliziten Stil-Definitionen für ein bestimmtes Dokument ersetzt werden.

CSS in HTML einbinden

Um CSS in HTML einzubinden, gibt es im Wesentlichen drei Möglichkeiten:

1. Formatierung einzelner HTML-Tags über das Attribut style
2. Angabe der Stildefinitionen im <head>-Bereich des HTML-Quelltextes
3. Auslagerung der CSS-Definitionen in eine eigenständige Datei

Die bevorzugte Methode bei einzelnen HTML-Dateien stellt die Option 3 dar, da auf diese Weise der eigentliche Quelltext frei von Formatierungen gehalten werden kann (Prinzip Trennung von Inhalt und Gestaltung) und eine Vielzahl von Seiten, die das gleiche Stylesheet verwenden, leicht durch einmalige Veränderungen der Stylesheet-Datei angepasst werden können. Wird der Content einer Seite dynamisch erzeugt, wie das beispielsweise bei Content-Management-Systemen der Fall ist, ist die Auslagerung der CSS-Stile in eine separate Datei nicht notwendig.

Lediglich von dem externen Stylesheet abweichende oder ergänzende Definitionen sollten im Quelltext eingebettet werden, wobei sich wiederholende Stile üblicherweise im <head>-Bereich und individuelle Stile über das style-Attribut angegeben werden.

Hier wird auch deutlich, was mit dem Begriff ›kaskadierend‹ gemeint ist: Die Stildefinitionen folgen einer Hierarchie, innerhalb der globale Definitionen von lokalen ›überschrieben‹ werden. Das bedeutet, dass eine Definition in einer externen Datei durch eine Definition im <head>-Bereich ersetzt wird und diese wiederum von einer Definition über style innerhalb eines HTML-Tags ersetzt wird.

Dies soll durch folgendes Beispiel verdeutlicht werden. Hier haben wir eine Stylesheet-Datei styles.css, die im HTML-Quelltext der Datei index.htm referenziert wird (Zeile 6). Darüberhinaus existieren im <head>-Bereich der HTML-Datei und über das style-Attribut weitere Definitionen:

Code kopieren
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>CSS-Beispiel</title>
    <meta charset='UTF-8'>
    <link rel='stylesheet' type='text/css' media='screen, print' href='styles.css'>
    <style media='screen, print'>
      /* Definitionen im HTML-Quelltext */
      h1 { color:#23b; font-size:22px; }
      h1, p { font-family:Arial,sans-serif; }
      p { font-size:16px; }
      .schmal { margin-left:40px; margin-right:40px; }
    </style>
  </head>
  <body>
    <h1>Beispiele für Formatierungen mit CSS</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p class='schmal'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p class='schmal' style='font-family:"Times New Roman",serif;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <span style='font-style:italic;'>At vero eos et accusam et justo duo dolores et ea rebum.</span> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </body>
</html>

Hier die CSS-Datei styles.css. Die Angabe @charset "utf-8"; ist immer dann notwendig, wenn die Datei der Zeichenkodierung UTF-8 entspricht (und auch als solche gespeichert wurde), um dies einem Browser mitzuteilen.

Code kopieren
/* Hier die Definitionen in einer externen Datei */

@charset "utf-8";
html { background-color:#def; padding:10px; }
body { background-color:#eaf; padding:30px; }

Wir sehen hier, welche Auswirkungen die Stildefinitionen haben. Durch Einbinden der CSS-Datei über

<link rel='stylesheet' type='text/css' media='screen, print' href='styles.css'>

werden die Stile für die Elemente <html> und <body> integriert. In diesem Fall bewirkt das die Färbung des Hintergrundes der Elemente über das Attribut background-color gefolgt von einem Hexadezimalwert für die Farbe sowie die Festlegung eines Abstandes zum Elternelement in Höhe und Breite durch das Attribut padding gefolgt von einem Wert in Pixeln.

Durch das Attribut media kann explizit angegeben werden, für welchen Medientyp ein Stylesheet verwendet werden soll. In diesem Fall für die Typen screen (Bildschirm) und print (Druck). Zu weiteren möglichen Medientypen siehe SelfHTML.

Syntax

Die Syntax von Stildefinitionen hat grundstätzlich die Form
Selektor1, Selektor2 … { Attribut:Wert; Attribut2:Wert2; … }

Kommentare innerhalb von CSS werden in /* und */ eingeschlossen.

Im <head>-Bereich des HTML-Quelltextes existieren nun weitere Definitionen für die Elemente <h1> und <p> mit Angaben über die Textfarbe (color), Schriftart (font-family) und Schriftgröße (font-size). Es können Definitionen für mehrere Elemente gleichzeitig angegeben werden (h1, p { font-family:Arial,sans-serif; }). Weiterhin wurde ein so genannter Klassen-Selektor mit dem Namen .schmal eingeführt, der im Quelltext über das Attribut class angesprochen wird.

Während Definitionen für HTML-Elemente ohne weitere Referenzen im Quelltext auf jedes Element angewendet werden, gilt das bei Klassen-Selektoren nur für jene Elemente, die über class angesprochen werden.

Das Prinzip der Kaskade bewirkt hier nun, dass der zweite Absatz eingerückt wird (margin) obwohl der Stil für <p> das nicht vorsieht. Der Selektor class='schmal' hat aber Priorität. Ebenso erhält der dritte Absatz die Schrift ›Times New Roman‹, obwohl in der Definition für <p> ›Arial‹ vorgesehen ist. Weiterhin ist ein Satz des dritten Absatzes kursiv formatiert, da der innere Abschnitt <span> eine höhere Priorität als das übergeordnete class-Attribut besitzt.

Angaben zur Schriftfamilie mit font-family sollten in Anführungszeichen gesetzt werden, wenn der Schriftname aus mehreren Worten besteht, z. B. bei "Times New Roman".

Eine alternative Methode zum Einbinden von separaten CSS-Dateien bietet die CSS-Funktion @import, die sich in der Wirkung aber nicht von <link rel='stylesheet'> unterscheidet.

Code kopieren
<style media='screen, print'>
  @import url(css/styles.css);
</style>

Selektor für id

Es wird empfohlen, Stile für einmalig vorkommende Elemente über deren id-Attribut zu formatieren. Dies betrifft allerdings vor allem das allgemeine Layout, worauf später eingegangen wird. Der Selektor hat hier die Form #Selektor.

Code kopieren
  <head>
    <style media='screen, print'>
      #content { border:2px solid #ade; background-color:#efa; font-size:10px; padding:10px; }
    </style>
  </head>
  <body>
    <div id='content'>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
  </body>

Verschachtelte Elemente

Man kann für von globalen Angaben abweichende Formatierung das Attribut class auch vermeiden, indem man genau die Position eines Elements innerhalb der verschachtelten Struktur des HTML-Dokuments angibt.

Code kopieren
  <head>
    <style media='screen, print'>
      a { text-decoration:none; }
      a:hover { text-decoration:underline; }
      #content { border:2px solid #ade; background-color:#efa; font-size:10px; padding:10px; }
      #content a { font-weight:bold; color:#f00; }
      #content a .green { color:#090; }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href='#'>At vero eos et accusam et justo duo <span class='green'>dolores</span> et ea rebum.</a> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <div id='content'>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href='#'>At vero eos et accusam et justo duo <span class='green'>dolores</span> et ea rebum.</a> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
  </body>

Obwohl Links hier global nur die Definition a { text-decoration:none; } bekommen haben, werden Links, die sich innerhalb des Elements mit der id='content' befinden (und nur diese), zusätzlich fett und rot formatiert.

Die Klasse .green wird nur innerhalb von #content a angewendet, da sie für Bereiche außerhalb nicht definiert wurde.

Stile für Elemente mit bestimmten Attributen

Es können auch Stile für Elemente definiert werden, sofern sie bestimmte Attribute enthalten:

Code kopieren
  <head>
    <style media='screen, print'>
      span[lang=en] { font-style:italic; }
      abbr, span[lang=en][title] { cursor:help; border-bottom:1px dotted #090; }
    </style>
  </head>
  <body>
    <p>Die Abkürzung DSL steht für &rsaquo;Digital Subscriber Line&lsaquo;.</p>
    <p>Die Abkürzung <abbr title='Digital Subscriber Line'>DSL</abbr> steht für &rsaquo;<span lang='en'>Digital Subscriber Line</span>&lsaquo;.</p>
    <p>Die Abkürzung <abbr title='Digital Subscriber Line'>DSL</abbr> steht für &rsaquo;<span lang='en' title='Digitale Teilnehmeranschlussleitung'>Digital Subscriber Line</span>&lsaquo;.</p>
  </body>

In diesem Beispiel wurde neben dem Stil für das Element <abbr> ein Stil für das Element <span> definiert, wenn es ein Attribut lang mit dem Wert en enthält. Ein weiterer Stil wurde für den Fall definiert, wenn das Element darüber hinaus auch noch ein title-Attribut mit beliebigem Inhalt enthält.