Cascading Style Sheets
Was sind Cascading Style Sheets?
Cascading Style Sheets sind die Möglichkeit zur externen Formatierung von Internetseiten. Anstatt auf x Seiten den einzelnen Elementen immer wieder bestimmte Attribute zuzuweisen, macht man das an einer zentralen Stelle. Der Aufwand pro Seite reduziert sich, und die Pflege und Änderung des Designs insgesamt vereinfacht sich.
CSS einbinden
Um CSS zu verwenden sind zwei Schritte notwendig:
- Das Erstellen einer CSS-Datei.
Eine CSS-Datei ist eine reine Textdatei, die mit jedem Texteditor erstellt und bearbeitet werden kann. Die Dateierweiterung ist .css. Man erstellt also zum Beispiel eine Datei test.css und speichert sie in seinem Verzeichnis mit den HTML-Dateien. - Das Erstellen des Verweises auf die CSS-Datei in der HTML-Datei
Den Verweis erstellt man im <head> der HTML-Datei. Der entsprechende Eintrag sieht für unser Beispiel so aus:<link rel="stylesheet" type="text/css" href="test.css">Im Verweis "sagt" man also der HTML-Datei, dass es sich bei der Formatvorlage um ein Stylesheet handelt, dessen Typ "text/css" ist (kann auch Print- oder Sprachausgabe usw. sein) und wie die CSS-Datei heißt und wo sie liegt (im Beispiel im selben Verzeichnis, sonst wäre ein relativer Pfad vor dem Dateinamen nötig).
CSS definieren
Zunächst ein Beispiel für die Formatierung des <body>-Elements:
background:black;
font-family:verdana, helvetica, "new century schoolbook", sans-serif;
font-size:13px;
color:#BAA;
margin:0;
padding:0;
}
Im Beispiel werden die Attribute Hintergrundfarbe, Schriftfamilie, Schriftgröße, Schriftfarbe, Außenrand/-abstand und Innenabstand festgelegt.
Die Festlegung des Formats erfolgt dabei in folgenden Schritten:
- Namen des Elements aufschreiben, Achtung: Im Stylesheet sind das keine Tags, also keine spitzen Klammern!
- Attribute in geschweifte Klammern einschließen
- Attribut aufschreiben und nach Doppelpunkt den Wert zuweisen (mehrere Werte durch Kommata trennen)
(besteht ein Attributwert aus mehreren Wörtern wie die Schrift "new century schoolbook", so ist der Wert in Anführungszeichen zu schreiben, sonst wird er falsch interpretiert) - Zuweisung durch ein Semikolon (;) beenden
Es gibt also grundlegende Unterschiede zur Formatierung im HTML-Code. Dort steht nämlich zwischen Attribut und Wert ein Gleichheitszeichen, der Wert steht in Anführungszeichen und alles ist Teil eines Tags. Beachten Sie bitte diese Unterschiede, die aber nicht weiter ins Gewicht fallen, wenn man versucht, alle Formate per CSS zu definieren. Im Zweifelsfalle muss man sich eben Codebeispiele in der Hilfe oder im Internet ansehen.
Von den CSS-Festlegungen abweichende Formate
Falls jemand befürchtet, dass CSS die Möglichkeit individueller Formate auf einzelnen Internetseiten einschränkt, der sei hier beruhigt - alles ist möglich, auch wenn man CSS benutzt.
Browser, die das Format einer Internetseite interpretieren, halten sich an bestimmte Vorgehensweisen:
- Gibt es überhaupt keine individuellen Attribute, so benutzen die Browser ihre Standardeinstellungen.
- Gibt es eine CSS-Datei, so werden die Festlegungen der CSS-Datei benutzt.
- Gibt es einen <style>-Abschnitt im <head> der Datei, werden die Festlegungen dieses Abschnitts benutzt.
- Gibt es direkte Formatierungen innerhalb des <body>, so werden diese Festlegungen benutzt.
Man kann also, wenn man will, die globalen Formate der CSS-Datei durch Formatierungen innerhalb einzelner HTML-Dateien bei Bedarf überschreiben. Allerdings sollte man sich genau überlegen, was man tut.
