Einführung in Cascading Style Sheets : Grundlagen

Genereller Syntax

Eigene Style Sheets zu erstellen ist recht simpel. Man braucht eigentlich nur ein paar HTML Kenntnisse, um loszulegen. Ein Beispiel: Um die Textfarbe einer Überschrift 1. Ordnung H1 festzulegen, benutzt man diese Regel:


H1 { color: red }

Das Beispiel oben ist eine einfache CSS Regel. So eine Regel besteht aus zwei Hauptteilen, dem Selektor H1 und der Deklaration color: red. Die Deklaration besteht ebenfalls aus zwei Teilen, der Eigenschaft color und dem Wert red. Daraus ergibt sich dann folgender Syntax:


SELEKTOR { Eigenschaft: Wert }

Der Selektor H1 ist die Verbindung zwischen HTML und dem Style Sheet, und alle gültigen HTML Elemente sind mögliche Selektoren.

Die Eigenschaft 'color' ist nur eine von vielen Eigenschaften, mit denen man das Aussehen des HTML Dokumentes beeinflussen kann. Eine Liste der möglichen Eigenschaften mit ihren möglichen Werten findet sich später in diesem Tutorial.

Einbinden in HTML

Um Style Sheets auch nutzen zu können, muss man sie im Html Dokument einbinden:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">

<HTML>

  <HEAD>

    <TITLE>Dokument Titel</TITLE>

    <LINK REL="STYLESHEET" TYPE="text/css" 

      HREF="http://imported.com/blues.css" TITLE="Blues">

    <STYLE TYPE="text/css">

      @import url(http://imported.com/basics.css);

      H1 { color: blue }

    </STYLE>

  </HEAD>

  <BODY>

    <H1>Die Überschrift ist blau</H1>

    <P STYLE="color: red">Und der Paragraph ist Rot.

  </BODY>

</HTML>

Dieses Beispiel gibt 4 Möglichkeiten, wie man CSS mit HTML verbinden kann. Das Link Element um auf ein externes Style Sheet zu verweisen, ein Style Element innerhalb des Head Elementes, ein importiertes Style Sheet, mit der @import Notation und ein Style Attribut im Body.

Die Style Sheets die mit Link referenziert wurden, sind optionale, vom Benutzer auswählbare Style Sheets, während die mit @import importierten Style Sheets auf jeden Fall in das Dokument implementiert werden.

Das Style Element dient zur lokalen Deklaration von CSS Regeln. Hier sollte man alles Seitenspezifische deklarieren, um speziellen Elementen ein besonderes Aussehen zu verleihen.

Da ältere Browser das Style Element nicht kennen, kann man den Inhalt mit Kommentaren verstecken, damit diese Browser den Inhalt nicht als Text anzeigen.


<STYLE TYPE="text/css"><!--

  H1 { color: green }

--></STYLE>

Mit dem Style Attrbut kann man dann jedes Einzelne HTML Element (außer BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE und TITLE) ein bestimmtes Aussehen zuweisen. Diese Eigenschaften gelten dann nur für dieses eine auftauchen des Elements und andere, gleiche Elemente ohne Style Attribut werden normal angezeigt.

Gruppieren der Styles

Um Styles Sheets möglichst klein zu halten, kann man Selektoren in Gruppen zusammenfasen, indem man sie mit mit Kommata vor der Deklaration trennt:


H1, H2, H3, DIV { font-family: Arial }

Ähnlich kann man auch mehrere Eigenschaften zusammenfassen:


H1 {

  font-weight: bold;

  font-size: 12px;

  line-height: 14px;

  font-family: helvetica;

}

Zusätzlich haben einige Eigenschaften ihren eigenen Gruppierungssyntax:


H1 { font: bold 12px/14px helvetica }

Das Beispiel ist mit dem oberen identisch.

Vererbung

Im ersten Beispiel wurde die Farbe des Elements H1 auf die Farbe Rot gesetzt. Mal angenommen in dem Element H1 taucht nun ein mit EM hervorgehobenes Wort auf z.B.


<H1>Dieses Wort <EM>ist</EM> wichtig</H1>

Wenn EM keine Farbe zugewiesen wurde, so erbt dieses Element von ihrem übergeordnetem Element, also die Farbe Rot. Viele andere Eigenschaften wie font-family oder font-size werden vergleichbar vererbt.

Um so z.B. für das gesamte Dokument eine einheitliche Schrift zu bestimmen kann man schreiben:


BODY {

  font-family: Arial;

  color: blue;

  background: url(hintergrund.gif);

}

Es gibt auch Eigenschaften die nicht vererbt werden, so z.B. die background Eigenschaft, wobei es eigentlich egal ist, ob diese Eigenschaft vererbt wird, oder nicht, da der Hintergrund des übergeordneten Elementes sowieso durchscheint.

Oftmals ist es auch sinnvoll eine Eigenschaft als Prozentangabe anzugeben, die sich dann auf eine andere Eigenschaft bezieht, z.B.:


P { font-size: 10pt }

P { line-height: 120% }  

  /* relativ zur 'font-size', also 12pt */

Wenn nun Elemente diesem P untergeordnet werden, dann übernehmen diese den absoluten line-height Wert (also 12pt) und nicht den relativen von 120%.

Attribut 'Class' als Selektor

Um den Einsatz von Styles möglichst flexibel zu gestalten, gibt es das Html Attribut Class. Für alle Elemente innerhalb von Body kann das Attribut definiert werden, und die Klasse (Class) kann im Style Sheet deklariert werden:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">

<HTML>

 <HEAD>

  <TITLE>Titel</TITLE>

  <STYLE TYPE="text/css">

    H1.green { color: green }

  </STYLE>

 </HEAD>

 <BODY>

  <H1 CLASS="green">Eine grüne Überschrift</H1>

  <H1>Eine Normale Überschrift</H1>

 </BODY>

</HTML>

Für Class-Selektoren gelten die gleichen Vererbungsregeln, d.h. ein mit EM hervorgehobener Teil innerhalb von <H1 Class="green"> wird ebenfalls grün.

Man kann die Klassen auch für alle Elemente deklarieren:


.green { color: green }

       /* Für alle Elemente mit CLASS=green */

Attribut 'Id' als Selektor

Das HTML Attribut 'Id' kann ebenfalls als Selektor verwand werden. Der Unterschied zu 'Class' besteht darin, das ein 'Id' ein Unikat in dem Dokument sein muss, also jeder Wert für 'Id' darf nur einmal auftauchen. Ihnen bekommt daher eine besondere Bedeutung zu. Deklariert werden 'Id' Selektoren mit einem vorangestelltem '#'


  #Wide { letter-spacing: 0.3em }

H1#Wide { letter-spacing: 0.5em }

Im ersten Beispiel bekommt z.B. ein <P ID="Wide">Wide Text</P> ein letter-spacing von 0.3em. Im zweiten Beispiel gilt es nur für ein H1 Element mit dem Atrribut 'Id=Wide', daß dann ein letter-spacing von 0.5em bekommt.

Kontextabhängige Selektoren

Die Vererbung von Eigenschaften erspart einem viel Tipparbeit. Man definiert Standardeigenschaften und behandelt Ausnahmen separat. Wenn man z.B. dem Element EM innerhalb von H1 ein besonderes Aussehen verliehen will, kann man schreiben:


H1 { color: blue }

EM { color: red }

Jetzt wird das Element EM innerhalb von H1 wie gewollt rot dargestellt, aber überall sonst im Dokument auch. Um das zu verhindern kann man die Styles abhängig von ihrem Auftauchen deklarieren.


H1 EM { color: red }

Wenn jetzt der Hierarchie entsprechend ein EM innerhalb von H1 gefunden wird, so wird das rot dargestellt, sonst nicht.

Das ganze kann man dann auch noch weiter verschachteln, z.B.:


DIV H1 EM { color: #ff00ff }

Kontextabhängige Selektoren können von Elementen, Class Attributen, Id Attributen oder Kombinationen daraus abhängig gemacht werden, z.B.:


DIV P           { font: small sans-serif }

.green H1       { color: blue }

#x78y CODE      { background: blue }

DIV.sidenote H1 { font-size: large }

Bedeutet soviel wie: P in DIV bekommt kleine sans-serif Schrift; H1 innerhalb von Class=green wird blau gefärbt; CODE innerhalb von ID="#x78y" bekommt blauen Hintergrund; H1 innerhalb von DIV mit Class=sidenote wird groß dargestellt.

Ebenso wie auch normale Selektoren, können kontextabhängige Selektoren gruppiert werden:


H1 B, H2 B, H1 EM, H2 EM { color: red }

Was dasselbe ist, wie:


H1 B  { color: red }

H2 B  { color: red }

H1 EM { color: red }

H2 EM { color: red }

Kommentare

Kommentare in CSS sind denen in Programmiersprachen wie C sehr ähnlich:


A { color: green } /* Linkfarbe ist grün */

CSS Kommenatare können nicht ineinander verschachtelt werden, und Kommentare wie man sie von JavaScript her kennt ala '// Kommentar' sind auch nicht zulässig.