Was sind Stylesheets?
Ein Stylesheet ist am ehesten mit einer Formatvorlage zu vergleichen. Grundidee hierbei ist die Trennung von Information und Darstellung. Das Stylesheet interpretiert die zugewiesenen Daten (Text, Tabellen, Grafiken etc.) und formatiert sie (z.B. für die Bildschirmausgabe) entsprechend den vorgegebenen Regeln. Mit Stylesheets ist in höherem Maße eine Arbeitsteilung möglich, als das früher z. B. bei HTML und eingebetteten Formatierungsbefehlen möglich war.
Wo ist CSS dort einzuordnen?
Cascading Style Sheets (CSS), ist eine von mehreren Ergänzungssprachen zu HTML, die die Spezifizierung der Präsentation eines Dokumentes ermöglicht. Sie erlaubt das beliebige Formatieren einzelner HTML-Elemente oder das Definieren zentraler Formate in Dokumenten.
Weitere Beispiele für Stylesheetsprachen sind XSL und DSSSL.
Warum gibt es Stylesheets und welchen Nutzen bringen sie?
Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente.
Ein weiteres wichtiges Leistungsmerkmal von CSS ist die Möglichkeit, zentrale Formate zu definieren. So können beispielsweise in einer externen Datei zentrale Definitionen zum Aussehen eines Elements notiert und dieses Stylesheet in viele HTML-Seiten parallel eingebunden werden. Alle Elemente der entsprechenden HTML-Dateien erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das spart Kodierarbeit und macht die HTML-Dateien kleiner.
Stylesheet-Definitionen können sogar in separaten Dateien notiert werden. Die Stylesheet-Dateien können in beliebig viele HTML-Dateien eingebunden werden, auf diese Weise werden für große Projekte einheitliche Layouts entworfen. Mit ein paar kleinen Änderungen in einer zentralen Stylesheet-Datei wird dann für hunderte von HTML-Dateien ein anderes Aussehen bewirkt.
Wie werden Stylesheet-Angaben mit (X)HTML kombiniert?
Eine Stylesheet-Angabe besteht aus der Eigenschaft und dem Wert, getrennt durch einen Doppelpunkt.
Die Eigenschaft ist das, was formatiert werden soll. Z.B.: color für die Schriftfarbe, border-width für die Rahmenbreite oder text-decoration für Unterstreichungen.
Als Wert sind Farbangaben, Einheiten oder Schlüsselworte möglich (siehe Beispiele).
Mit Hilfe von Stylesheet-Angaben kann man zum Beispiel einzelne HTML-Tags formatieren, Abschnitte mit <span> formatieren, Stylesheets zentral im Dokument deklarieren sowie Stylesheets in eine externe Datei auslagern.
Beispiel 1: Formatierung eines HTML-Tags
HTML-Tags lassen sich durch ein Attribut mit Stylesheets direkt formatieren. Das folgende Beispiel formatiert die Textfarbe einer Überschrift 1 in rot.
<h1 style="color:#ff0000;">Dies ist eine Überschrift</h1>
Man braucht in dem HTML-Tag nur das Attribut style="" mit den Stylesheet-Angaben in Anführungszeichen einzufügen.
Der Aufbau der Stylesheet-Angaben ist immer gleich: Die Eigenschaft, ein Doppelpunkt, der Wert und als Abschluss ein Semikolon.
Beispiel 2: Formatierung eines <span>-Abschnittes
Das folgende Beispiel formatiert die Worte "irgendein Text" fett und mit roter Textfarbe:
Dies ist <span style="color:#ff0000; font-weight:bold;">irgendein Text</span> und der soll formatiert werden.
Zur Formatierung ganzer Abschnitte innerhalb eines Absatzes eignet sich das <span>-Tag, da es sich um ein sog. Inline-Element handelt, das keinen eigenen Absatz erzeugt. Die Formatierung wird wie in dem vorherigen Absatz beschrieben durchgeführt, in dem das Attribut style="..." mit den Stylesheet-Angaben in Anführungszeichen in das <span>-Tag eingefügt wurde. Diese Formatierungen sind dann für alle Elemente innerhalb des <span>-Tags gültig.
Beispiel 3: Stylesheets zentral im Dokument deklarieren
In der Regel sollten die Formate für das gesamte Dokument gültig sein. Damit nun aber nicht in jedem HTML-Tag die Angaben wiederholt werden müssen, besteht die Möglichkeit die Formatierungen an einer Stelle im Dokument zentral zu deklarieren. Sie sind dann für das gesamte Dokument gültig.
<html>
<head>
<style type="text/css"><!--
Stylesheet Angaben
//--></style>
<title>Irgendein Titel</title>
</head>
<body></body>
</html>
Im <head>-Bereich, d.h. zwischen dem einleitenden <head>- und dem abschließenden </head>-Tag, wird der Bereich, in dem die Stylesheet-Angaben stehen, mit <style type="text/css"><!-- eingeleitet. Dann folgen die Stylesheet-Angaben und abschließend //--></style>. Das <style>- und </style>-Tag schließt den Stylesheet-Bereich ein. Die Kommentar-Tags <!-- //--> sollen verhindern, dass Browser, die CSS nicht verstehen, diese Angaben als normalen Text anzeigen.
Beispiel 4: Stylesheets in eine externen Datei auslagern
Die zentrale Deklaration von Formaten im <head>-Bereich ist für eine Seite gut, aber die wenigsten Homepages bestehen nur aus einer Datei. Um die Stylesheet-Angaben allen Seiten zur Verfügung zu stellen, können sie auch in einer Datei gespeichert und diese dann mit den HTML-Dokumenten verlinkt werden.
<link rel="stylesheet" type="text/css" href="dateiname.css">
Dafür wird eine Textdatei benötigt, die die Stylesheet-Angaben enthält und an der Endung .css zu erkennen ist. Das <link>-Tag, das, wie im Beispiel oben, an einer beliebigen Stelle im <head>-Bereich eingefügt wird, verweist auf diese externe Datei. Dafür müssen im Attribut href= Pfad und Name der Datei angegeben werden. Liegt diese Datei auf einem anderen Server, können auch komplette URL-Adressen angeben werden.
Der einzige Unterschied zu den zentralen Deklarationen im <head>-Bereich ist, dass die Angaben nicht mit dem <style>-Tag eingeschlossen werden. Es reicht einfach eine Auflistung der Stylesheet-Angaben.
Entstehung und Entwicklung von Stylesheets:
Zum ersten Mal tauchten Stylesheets 1993 auf. Die in diesem Artikel behandelten Cascading Style Sheets (CSS) wurden 1994 von Håkon Wium Lie vorgeschlagen und gemeinsam mit Bert Bos weiterentwickelt. 1995 wurde das World Wide Web Consortium (W3C) auf CSS aufmerksam.
Die erste Publikation von Håkon Wium Lie und Bert Bos erschien 1996 unter dem Namen „CSS Level 1 Recommendation und ist in aktuellen Browsern nahezu vollständig umgesetzt.
Seit 1998 gibt es eine zweite Version mit dem Namen CSS Level 2 (CSS 2), diese wurde jedoch nicht von allen Browsern implementiert und wird daher nicht korrekt angezeigt.
Das W3C hat daraufhin eine Zwischenversion mit dem Namen CSS Level 2 Revision 1 (CSS 2.1) erstellt, in welcher die von einigen Browsern nicht zu verarbeitenden Teile gestrichen wurden.
Derzeit ist die dritte Version CSS Level 3 (CSS 3) in der Entwicklung.
_______________________________________________________________
Quellenangabe:
http://de.wikipedia.org/wiki/Stylesheet
http://www.uni-koeln.de/rrzk/www/eingabe/barrierefrei/glossar.html
http://de.selfhtml.org/css/intro.htm
http://www.css4you.de/wscss/css02.html
http://de.wikipedia.org/wiki/Cascading_Style_Sheets