CSS in der Praxis
CSS-Kunstwerke

Inhalt und Design

CSS in der Praxis

Cascading Stylesheets (CSS) verdanken ihre Entstehung der Forderung nach klarer Trennung von Inhalt und Layout beim Webdesign. Statt unzähliger über das gesamte HTML-Dokument verstreuter Font-, Farben- und Schriftdefinitionen sollte es eine klare Trennung zwischen Formatdefinitionen und der Darstellung des eigentlichen Inhalts geben. Mit dem Instrumentarium, das CSS zur Verfügung stellt, ist dieses Ziel ohne große Umwege zu erreichen.

Die folgenden Tipps und Tricks zeigen anhand von Beispielen, was sich mit CSS alles realisieren lässt.

CSS zusammenfassen

CSS in der Praxis

Zusammenfassen ist immer dann eine gute Idee, wenn gleiche Anweisungen auf verschiedene Elemente, Klassen oder IDs angewendet werden müssen. Angenommen, Sie möchten Ihre Überschriften in Blau und in der Schriftart Verdana darstellen. Das liest sich dann so:

H1 {color : blue; font-family : verdana,arial,helvetica;}
H2 {color : blue; font-family : verdana,arial,helvetica;}
H3 {color : blue; font-family : verdana,arial,helvetica;}

Es geht eleganter. Ein Komma hilft dabei:

H1,H2,H3 {color : blue; font-family : verdana,arial,helvetica;}

Was aber, wenn die Style-Definitionen zwar ähnlich, aber nicht identisch sind? Kein Problem, Sie arbeiten mit Wiederholungen. Ausgangspunkt sind diesmal unterschiedliche Schriftgrößen, jedoch dieselbe Farbe und Schriftart:

H1 {font-size : 1.2.em; color : blue; font-family : verdana,arial,helvetica;}
H2 {font-size : 1.1.em; color : blue; font-family : verdana,arial,helvetica;}
H3 {font-size : 1.0.em; color : blue; font-family : verdana,arial,helvetica;}

Dies ließe sich dann wie folgt abkürzen:

H1 {font-size : 1.2.em;}
H2 {font-size : 1.1.em;}
H3 {font-size : 1.0.em;}
H1,H2,H3 {color : blue; font-family : verdana,arial,helvetica;}

Das klappt auch prima, wenn es um die Formatierung von Hyperlinks geht.

CSS kombinieren

CSS in der Praxis

Zahlreiche Anweisungen können Platz sparend zu einer einzigen zusammengefasst werden. Der Effekt bleibt derselbe, die Übersichtlichkeit wird jedoch deutlich erhöht. Das wohl bekannteste Beispiel ist der Rahmen: Rahmenbreite, Rahmenfarbe, Rahmenart. Einzeln definiert erhalten Sie zum Beispiel dies:

border-width: 1px;
border-color: red;
border-style: dotted;border: 1px red dotted;

Aber das klappt auch mit Schriften. So kennt man es:

font-size: 12px;
line-height: 120%;
font-family: Verdana,Arial,Helvetica

Und so geht es auch:

font: 12px/120% Verdana,Arial,Helvetica

Kommas und ein Schrägstrich sorgen dafür, dass der Browser nichts missversteht.

Verschachteln

CSS in der Praxis

Kunstvoll geht es nun zu. Angenommen man möchte innerhalb einer Menüleiste andere Formatierungen benutzen, als es auf der übrigen Seite der Fall ist. Andere Schriften, Textauszeichnungen, Farben, was auch immer. In der Folge müssen neue Klassen definiert werden. Ein Beispiel für eine solche CSS-Datei:

P {font-family : Verdana, Arial; color : blue}
H3 {font-weight: normal; text-decoration: none;}
.menue {border: 1px solid black;}
.menueschrift {font-family : Arial; color : red;}
.menueueberschrift {font-weight: bold; text-decoration: underline;}

Stattdessen verschachteln Sie:

P {font-family : Verdana, Arial; color : blue}
H3 {font-weight: normal; text-decoration: none;}
.menue {border: 1px solid black;}
.menue P {font-family : Arial; color : red;}
.menue H3 {font-weight: bold; text-decoration: underline;}

Sie definieren P und H3, sofern sie innerhalb des Menüs vorkommen, kurzerhand um. Der Vorteil liegt hier nicht unbedingt innerhalb der CSS-, sondern in der HTML-Datei. Man spart sich nämlich die Definition diverser Klassen.

Dies lässt sich weiter auf die Spitze treiben. So werden alle Fettschriften innerhalb eines Absatzes innerhalb des Menüs rot:

.menue P STRONG {color : red;}

Sämtliche übrigen P- oder STRONG-Tags werden nicht beeinflusst. All das kann weit komplexer gedacht werden und bietet eine Menge Raum für zusätzliche Optimierung.

Klassentreffen

CSS in der Praxis

Style-Definitionen auszulagern ist eine prima Sache. Doch im Lauf der Zeit schwillt so manche CSS-Datei bedrohlich an. Das ist kein Wunder, solange für neue Designelemente und Varianten immer wieder Klassen definiert werden. Ein gut organisiertes Klassentreffen spart Platz. Angenommen Sie verwenden gern Tabellen, dann codieren Sie so:

.tabelle {
border : 1px solid red;
background-color : yellow;
padding-left : 6px;
padding-right : 10px;
margin-left : 4px;
font-family : verdana;
height : 150px;
width : 150px;}

Ein paar Seiten später brauchen Sie dasselbe mit blauem Rahmen. Die Folge ist ein weiterer, weitgehend indentischer Eintrag in die Style-Datei. Das lässt sich verhindern, wenn man Styles modular aufbaut. Etwa so:

.tabelle {
background-color : yellow;
padding-left : 6px;
padding-right : 10px;
margin-left : 4px;
font-family : verdana;
height : 150px;
width : 400px;}

rahmenrot { border : 1px solid red;}
rahmenblau { border : 1px solid red;}

Unglücklicherweise können aber zwei Klassen nicht gleichzeitig zum Einsatz kommen. Stattdessen gibt uns CSS 2 eine andere Methode an die Hand: