Wie funktioniert CSS

Schaut man sich das erste Mal einen CSS-Befehl an, führt das meistens zu einem panischen Weiterklicken, weil das alles sehr kompliziert ausschaut. Aber eigentlich ist es das nicht. Bei genauer Betrachtung ist CSS eigentlich sogar selbsterklärend und wenn man eine Weile damit umgegangen ist, geht es schon beinahe wie von selbst.

Ein CSS-Befehl ist immer gleich aufgebaut:
Eigenschaft: Wert ;
Es gibt also eine Eigenschaft, wie beispielsweise die Farbe (color) und der wird ein Wert zugewiesen (beispielsweise "white"). Abgeschlossen wird jeder Befehl mit einem Semikolon. Das sieht dann in CSS so aus:
color: white ;
(ob man da Leerzeichen zwischen macht oder nicht, ist egal)

Um allerdings nun mit der Farbdefinition etwas sinnvolles anfangen zu können, muss es einem HTML-Befehl oder einer so genannten Klasse, wahlweise eines Bereiches zugewiesen werden.

Keine Angst - klingt komplizierter als es in Wirklichkeit ist.

Einige HTML-Befehle sind relativ bekannt:
p für Absätze
div für Bereiche
a href für Verweise
img src für Grafiken
table für Tabellen

Und noch ein paar mehr. Für jeden HTML-Befehl kann man die vorgegebene Formatierungsdefinition verändern. Normalerweise macht der p-Tag (HTML-Befehle werden als Tag (englisch gesprochen) bezeichnet) nichts weiter als einen Absatz zu kennzeichnen. Das bedeutet, dass bei zwei aufeinanderfolgenden Absätzen diese mit einer Zeile dazwischen ausgegeben werden im Browser.

Schreiben wir nun in unserer CSS-Datei



werden unsere Absätze mit blauer Schrift dargestellt.
Möchten wir einen Absatz in blau und den anderen Absatz in roter Schrift anzeigen lassen, vergeben wir einfach zwei Klassen:



In der CSS definieren wir nun für jede Klasse eine andere Schriftfarbe:



Klassen werden in der CSS immer mit einem Punkt vor dem Klassennamen eingeleitet. der Punkt ist aber nur in der CSS, in der HTML (oder index.php des Templates) ist dieser Punkt nicht vorhanden.

Auf diese Art sind nun zwei Klassen, die einem p-Tag zugeordnet sind, definiert.
Statt die Klassen einem p-Tag zu zuordnen, können wir sie auch "alleinstehend" definieren und dann für andere Tags auch benutzen. Also:



In der index.php des Templates kann nun diese Klasse an jeder beliebigen Stelle benutzt werden:



Somit kann ich Klassen an bestimmten HTML-Tags binden oder für alle Tags zugänglich machen.

Statt Kassen können auch Bereiche / IDs definiert werden. Der einzige Unterschied ist, dass statt eines Punktes eine Raute die CSS-Zuweisung einleitet:



Der Unterschied ist eher ein gedachter Unterschied. Ein Bereich wird in der Regel zur Definition von zentralen Formaten eingesetzt und sind in der Regel nicht an einem bestimmten Tag gebunden. Wohingehend Klassen meist an einem oder wenigen Tags gebunden sind.


Eigentlich war es das schon. Lediglich die Befehle muss man kennen und wissen, was für Werte man zuweisen kann. Da sich das aber niemand merken kann, gibt es dafür natürlich Listen und Erklärungen, wo man nachschauen kann. Oder auch Editoren, die einem da weiter helfen. Der professionelle Dreamweaver bietet beispielsweise die Möglichkeit den Befehl selbstständig zu schreiben, wenn man ihn aus der sehr umfangreichen Liste auswählt.

Für den schmalen Geldbeutel gibt es aber SelfHTML (Link siehe unten), wo eine hervorragende Dokumentation bereit steht.

CSS für Fortgeschrittene

Es gibt natürlich noch ein paar Tricks und Kniffs, die man mit CSS umsetzen kann. Hier ein paar interessante Beispiele:

Den p-Tag kennen wir schon. Der b-Tag gibt den so gekennzeichneten Bereich in Fettschrift aus.

Nun kan ich aber auch sagen, die fette Schrift soll in grün ausgegeben werden, aber nur wenn der fette Text in einem Absatz steht. Steht die Fettausgabe nicht in einem Absatz, soll sie normal ausgegeben werden.

Im CSS löse ich das dadurch, in dem ich eine "Verschachtelung" schreibe (der Fachmann nennt das "Kontextsensitive Selektoren"):



Ich schreibe also erst den Tag, der erfüllt sein muss, damit das innere Tag, also der b-Tag dann die grüne Schriftfarbe enthällt. Ist kein p-Tag vorhanden, in dem der b-Tag liegt, wird diese Anweisung einfach ignoriert.




Ebenfalls ist es möglich sowohl eine Klasse, als auch eine ID einem Tag zu zuweisen. Etwas, das man beispielsweise in Joomla häufiger findet. So kann ich zum Beispiel einem Verweis generell eine grüne Schrift zuweisen und einem bestimmten davon immer in Großbuchstaben ausgeben lassen:



In "MeineKlasse" ist generell die grüne Schrift für alle Verweise, die mit dieser Klasse definiert sind, zugewiesen. Und zusätzlich gibts noch für die passende ID die Verweise in Großbuchstaben. Im HTML sieht das dann so aus:




Will man mehrere Tags mit den gleichen Angaben versehen, dann kann man diese mit einem Komma trennen und braucht die CSS-Befehle nur einmal zu schreiben:



Das ist jetzt keine Verschachtelung, sondern die Formatierung gilt für alle drei Tags. Eine Verschachtelung hat kein Komma.
Ich kann auch Tags mehrmals definieren. Zum Beispiel erst mit einer gemeinsamen Definition belegen, die für mehrere Tags gilt, wie eben gemacht und danach noch mal eine gezielte Definition, die nur für einen Tag gilt. Also beispielsweise kann ich im nachstehenden Beispiel sowohl dem ganzen Absatz, als auch der fetten Schrift, als auch einen div gekennzeichneten Bereich grüne Schrift zufügen, aber dem b-Tag noch eine Schriftgröße von 20 Punkt mitgeben, so dass sich die fette Schrift deutlichst abhebt:



Natürlich gibts noch ein paar weitere interessante Möglichkeiten, aber zum Einstieg soll das hier reichen und bei Interesse auf SelfHTML verwiesen werden.

---