CSS in der Praxis
CSS-Kunstwerke

DeveloperIT-ProjekteSoftware

Stylesheets sind mehr als nur ein Werkzeug zur Definition von Schriftgrößen, Farben und Fonts. Nur mit CSS lassen sich Inhalte und Layout bei Webdesign klar voneinander trennen.

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:


Damit lassen sich nicht nur Kilobytes bei der Dateigröße sparen, sondern auch eine Menge Arbeit. Möglicherweise lohnt es sich auch, bereits vorhandene CSS-Dateien einmal unter diesem Gesichtspunkt zu prüfen.


Font-Definitionen abkürzen

CSS in der Praxis


Font-Tags ausradieren

CSS in der Praxis


CSS-Container

CSS in der Praxis

Bisher verschlossene Welten tun sich dem Webdesigner mit Containern auf. Ein Container ist nichts weiter als eine frei verschiebbare Rahmenkonstruktion. Um diesen Rahmen zu beschreiben, verwendet man CSS.

Ein Container kann jedes andere aus HTML bekannte Element enthalten. Container können ineinander geschoben (verschachtelt) werden. Mit Javascript ist es sogar möglich, sie zu animieren. Auf diese Weise erhalten Webseiten eine dynamische Komponente. Man spricht dann von DHTML, welches allerdings noch weitere Techniken erfordert.

Im Zusammenspiel mit einem geeigneten Editor können Container nicht nur sehr einfach erstellt werden, man kann sie auch frei auf der Arbeitsfläche bewegen und ist nicht mehr an die engen Beschränkungen von Tabellen und Blind-GIFs gebunden. Das geht mühelos und, wenn man will, auf den Pixel genau.

Allen Vorzügen zum Trotz gibt es im praktischen Einsatz auch Nachteile. Das bedeutet, der konsequente Einsatz von Containern schließt Besucher mit alten Browsern aus. Dennoch werden Container immer häufiger eingesetzt. Das Prinzip ist schnell zu durchschauen. Werfen Sie einmal einen Blick auf diesen Code:


So funktionieren Container

CSS in der Praxis


Layer mittig ausrichten

CSS in der Praxis

CSS-Layer lassen sich exakt definieren. Das gilt sowohl für ihre Größe als auch für ihre Position auf dem Monitor. Doch was, wenn der Layer ganz einfach zentriert erscheinen soll? Einen direkten Befehl dafür gibt es nicht. Allerdings kann ein Text oder ein Bild mittig ausgerichtet werden. Der Trick beruht darauf, dass Sie text-align : center bereits im -Tag unterbringen. Nun würde natürlich jedes auf der Seite befindliche Element in die Mitte rücken. Um das zu unterbinden, befehlen Sie dem Inhalt des Layers, mit text-align : left nach links zu rücken. Zusätzlich werden die Seitenränder (margin) des Layers auf Auto gesetzt. Der Code für das -Tag:

Der Quellcode für den Layer:

Layer mit Inhalt


Altes Formular, neue Technik

CSS in der Praxis

Versuchen Sie zur Abwechslung doch einmal eine Formular-Variante auf Basis von CSS-Containern. Dafür erstellen Sie mit Hilfe von

mehrere Container, welche die verschiedenen Elemente aufnehmen. Jeweils einen für die Bezeichnung und das Eingabefeld. Dazu kommt der Container, der das Formular als Ganzes in sich aufnimmt.





Name:



Vorname:



Ort:



CSS übernimmt nun die Formatierung und Ausrichtung der Elemente. Mit width: 400px; height : 280px; bestimmen Sie die Maße des gesamten Formulars. Mit padding-top: 3px bestimmen Sie die Höhe der Container zueinander. Mit width: 290px; den Abstand der Bezeichnung zum Eingabefeld. Und clear : both sorgt dafür, das ein Textumfluss weder links noch rechts stattfinden kann. Hier der CSS-Quellcode:

.ab {
padding-top: 3px; clear : both; }
.bez {
float: left; width: 80px; text-align: right; font-weight : bold; }
.formw {
float: right; width: 290px; text-align: left; }
.box {
width: 400px; height : 280px; background-color: silver;
border: 1px solid black; padding: 5px;}

Das Ergebnis ist das alte, nur die Technik dahinter ist eine andere. Vorteile kann das insofern bringen, als es nun leichter ist, ein Formular quasi von außen zu verändern.


ID oder Klasse?

CSS in der Praxis

Es gibt viele Wege, Stylesheets anzuwenden. Doch wann benutzt man Klassen? Wann eine ID als Selektor? Einfach ausgedrückt ist eine Klasse (.class) allgemeiner zu handhaben. Sie kann auf einer Seite mehrfach angewendet werden und beliebig oft vorkommen. IDs hingegen sind spezieller. Sie dürfen nur einmal auftauchen, gelten aber in der CSS-Hierarchie als gewichtiger. Das heißt, wenn eine Klasse nicht zur Geltung kommen will, hat man mit einer ID bessere Chancen. Die Benutzung einer ID bietet einige Vorteile: Sie kann als Sprungziel für Hyperlinks verwendet werden und sie können mit Javascript angesprochen werden.