Banner

Crashkurs CSS, Cascading Style Sheets


Im Crashkurs HTML wurde bereits auf die Anwendung von CSS eingegangen. An dieser Stelle nun noch einmal etwas ausführlicher.


Grundlegender Aufbau


Beispiel: style.css

1 /* Allgemeines */ 2 * { 3 font-family: Verdana; 4 font-size:0.96em; 5 } 6 body, div, img, table, tr, td, a, ul, li, span, h1, h2, iframe { 7 margin: 0; 8 padding: 0; 9 border-collapse: collapse; 10 border: 0px; 11 } 12 .i { 13 font-style: italic; 14 } 15 .u { 16 Text-Decoration: underline; 17 } 18 19 /* Links */ 20 a { 21 color: #003C9D; 22 Text-Decoration: underline; 23 } 24 a:hover { 25 color: #F60; 26 } 27 28 /* Inhalt */ 29 #content { 30 text-align: center; 31 }


Es können von oben nach unten einfach Definitionen heruntergeschrieben werden, welche anhand des obigen Beispiels mal eben erläutert werden.
1: Kommentare können und sollten gesetzt werden, um sich später noch in dem Code zurechtzufinden. Sie werden mit /* begonnen und mit */ wieder beendet. Alles dazwischen wird vom Browser ignoriert.
2-5: Alle Elemente können mit einem * angesprochen werden. Was hierfür Festgelegt wird, betrifft alle HTML-Tags. In diesem Fall werden Schriftart und Schriftgröße festgelegt.
6-11: HTML-Tags können generell bestimmte Eigenschaften zugewiesen werden. Es können auch mehrere Klassen, IDs und Tags durch einfache Aufzählung gleiche Eigenschaften erhalten. Hier werden bei einigen Tags Rahmen und Abstände entfernt.
12-17: CSS-Klassen werden mit einem Punkt begonnen, dahinter folgt der Name. Genutzt werden können Sie dann mit <span class="i">kursiv</span>.
Ein einzelnes Element kann durch Trennung mit Leerzeichen auch mehrere Klassen gleichzeitig besitzen:
<span class="i u">kursiv und unterstrichen</span>
18: Eine einfache Leerzeile im Code für die Übersicht ist natürlich gar kein Problem.
20-26: Dynamische Effekte bieten sich oft bei Links an. Veränderungen, welche z.B. beim Überfahren mit der Maus wirksam werden. In dem Beispiel wird ein Link unterstrichen und in einer bestimmten Farbe generell definiert. Beim Überfahren mit der Maus (:hover), wird durch Definition einer anderen Farbe diese entsprechend verändert.
29-31: IDs sind eine weitere Möglichkeit, ähnlich der Klassen. Diese werden statt mit einem Punkte mit einer Raute voran benannt. Eine ID darf in einer einzelnen Seite nur ein einziges Mal definiert werden. Das sieht dann folgendermaßen aus: <span id="content">Beispielinhalte der Seite</span>. Es empfiehlt sich meistens Klassen zu verwenden.


Einbettungsmöglichkeiten

CSS lässt sich generell auf 3 verschiedene Arten im Code hinterlegen.
Im HTML-Tag ist es schnell zu hinterlegen und zu testen. Allerdings wird der Code dadurch schnell unübersichtlich und das Design ist nicht mehr zentral verwaltbar.
Beispiel:
<span style="color:red;">Dieser Text wird dann rot.</span>

Im HTML-Head kann CSS einfach und zentral hinterlegt werden. Für sehr kleinen CSS-Code ist dies sogar zu empfehlen.
Beispiel:

<html> <head> <style type="text/css"><!-- .red {color:red;} --></style> </head> <body> <span class="red">roter Text</span> </body> </html>

Als eigene Datei kann CSS komplett ausgelagert werden. Dies erspart dem Browser jedes Mal die Style-Daten empfangen zu müssen. Beispiel: Datei 1: index.php:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body > <span class="red">roter Text</span> </body> </html>


Datei 2: style.css:

.red {color:red;}



Cascading

Das ist wohl eine der praktischsten Fähigkeiten von CSS. Treffen mehrere widersprüchliche Definitionen auf ein Element zu, greift das spezifischste.
Wird also der ganze Text mit einem * vordefiniert, kann er trotzdem mit einer spezielleren Definition nach Tag, Klasse oder ID anders definiert werden.
Im Beispiel ganz oben wird der Link (Element <a>) definiert. Mit a:hover wird in der Farbwahl widersprochen. :hover ist allerdings spezieller.


Formatierende HTML-Elemente ersetzen

Inzwischen werden altbekannte HTML-Formatierungs-Tags wie <b>,<i>,<u>,... als veraltet betrachtet, da Design einfach nicht in den Inhalt gehört. Es gilt als Spaghetti-Code. Sie können durch allgemeinere Elemente ersetzt werden. Beispiel:
<span class="b">fettgeschrieben</span>
Dies sieht zuerst wie ein Rückschritt aus. Jedoch wird sich der Vorteil bemerkbar machen, wenn komplexere Formatierungen durchgeführt werden sollen.


Eine gute Eigenschaften-Referenz für CSS lässt sich auf Self-HTML finden.