CSS Cascading Style Sheets
Cascading Style Sheets können das Aussehen von Internetseiten fest legen. Dabei wird jedem Strukturelement (z.B. Überschrift, Liste, usw.) ein besonderes Aussehen/Format zugewiesen. Ähnich dem Arbeiten mit Formatvorlagen in der Textverarbeitung erleichtert dies die Formatierung von HTML/XHTML/XML Seiten, so dass ein Internetauftritt auf einfache Weise ein durchgängiges Layout erhält.
- Wie geht das?
Das Festlegen der Formatierung kann auf zwei Arten erfolgen:
- Die notwendigen Einstellungen werden in jeder einzelnen (X)HTML-Datei in den
Header geschrieben oder bei den einzelnen TAGs hinzugefügt.
Diese Methode sollte nicht verwendet werden, da bei Änderungen diese in jeder (X)HTML-Datei durchgeführt werden müssen. - Die Formate werden in einer eigenen CSS-Datei festgelegt und diese wird von jeder HTML-Datei verwendet, so dass alle Seiten eines Webauftritts ein ähnliches Layout haben. Änderungen an der Formatierung müssen nur einmal durchgeführt werden und wirken sich auf alle eingebundenen (X)HTML-Seiten aus. Diese Methode soll im Weiteren vertieft werden.
- Die notwendigen Einstellungen werden in jeder einzelnen (X)HTML-Datei in den
Header geschrieben oder bei den einzelnen TAGs hinzugefügt.
- HTML entwickelt sich weiter
Seit HTML 4.0 schreiben die Spezifikationen vor, dass viele Formatierungen durch CSS realisiert werden sollen.
Unter XHTML werden zahlreiche HTML-Formatdefinitionen nicht mehr unterstützt, unter XML wird der Text komplett von der Formatierung getrennt und es sind externe CSS Definitionen notwendig.
- Syntax CSS
Selector (=TAG-Name) { Eigenschaft: Wert; }
h1 {color: red;}- (X)HTML Header
In den <head> Bereich muss der Eintrag der CSS-Datei erfolgen:
<link href="bini-demo.css" rel="stylesheet" type="text/css" />
- Basics
- Die CCS-Datei kann mit einem einfachen Editor erstellt werden und enthält alle notwendigen Formatinformationen. Dabei sollte auf Übersichtlichkeit geachtet werden und strukturierte Verfeinerung praktiziert werden. D.h. zuerst werden Formate für mehrere Elemente definiert, die in Folge verfeinert werden.
- Kommentar
Eine Information am Beginn der CSS-Datei kann wertvolle Informationen liefern (Author, letzte Änderung, ...) oder die Überlegungen bei der Entwicklung leichter nachvollziehen lassen.
/* basic-01.css 2010-08 bi einfache Beispiele */- *
Der Universalselektor * steht für alle Elemente, d.h. alle innerhalb von * aufgelistete Definitionen gelten für alle (X)HTML-TAGs.
* {font-family:comic sans ms; color:pink;}In diesem Beispiel werden alle Ausgaben in der Schrift Comic (sofern diese am PC des Betrachters installiert ist) und in pink dargestellt.
- Farbe im Hintergrund
Nun soll eine Hintergrundfarbe gestzt werden. Dabei kann man auf einige wenige vordefinierte Farben zurückgreifen
body {background:green;}oder diese im Farbcode des Hexadezimalsystems angeben.
body {background:#00FF00;}- Bild im Hintergrund
Beim Einbinden eines Hintergrundbildes sollte unbedingt darauf geachtet werden, dass die Ladezeit kurz gehalten wird (nicht alle Besucher haben eine schnelle Internetverbindung) und ev. die Effekte eines Kachelmusters ausgenutzt werden können.
body {background:#bcbcbc url(bg.jpg);}In der Definition sollte stets die Hintergrundfarbe der Farbe des Bildes entsprechen, damit die Farbgebung auch dann noch stimmig ist, wenn das Hintergrundbild nicht geladen werden kann.
- Schrift & Farbe
Durch Farben können bestimmte Texte klarer strukturiert werden, z.B können Überschriften unterschiedliche Färbungen erhalten.
h1 {color: magenta;}
h2 {color: #009900;}Diese Art der Definition kann für so gut wie alle Schriftbereiche verwendet werden.
- Text & Ausrichtung
Damit Texte automatisch ausgerichtet werden, kann die Eigenschaft text-align mit den Werten left, right, center verwendet werden.
h1 {color: magenta; text-align:center;}
h6 {text-align:right;}- Schrift & Dicke
Mit der folgenden Eigenschaft kann die Schriftstärke variiert werden, folgende Werte sind zulässig: normal, bold, bolder, lighter, 100-900, ...
p {font-weight:bolder;}Allerdings muss dies, von der jeweiligen Schrift auch unterstützt werden.
- Schrift & Stil
Ein schräger Schriftstil kann erreicht werden durch:
p {font-style:italic;}- Schrift & Art
Man unterscheidet serifenfreie Schriftfamilien (z.B. Arial - eine solche Schriftart wird hier im Fließtext verwendet) und Schriften mit Serifen (aus dem Französischen für Füßchen), also mit feinen Linien an den Buchstabenenden (z.B. Times New Roman - bei den Codebeispielen findet diese Schriftart Verwendung).
h4 {font-family: Arial, Helvetica, sans-serif;} h5 {font-family: xyz, "Snap ITC", "Times New Roman", serif;}Ist die Schrift Arial am PC des Betrachters installiert, so wird diese Schrift verwendet. Sind mehrere Schriftfamilien angegeben, so wird die erste passende, d.h. jede die als erste in der Liste mit einer installierten Schrift übereinstimmt verwendet. Um sicher zu gehen, dass das Layout auch ohne korrekt passender Schrift optimal dargestellt wird, sollte als letzte Eintragung in der Liste, der Typ der Schriftfamilie angegeben werden.
- Schrift & Größe
Die Angabe von Schriftgrößen erfolgt in vielen Fällen durch die Angabe der Größe in Punkt (pt). Dieses Maß stammt aus dem Druckergewerbe, doch leider erscheint ein Punkt auf verschieden Ausgabegeräten unterschiedlich groß, so dass sich dies negativ auf das Gesamtlayout auswirken kann.
Daher ist es günstiger eine Basisschriftgröße zu definieren und alle weiteren Schriftmaße in Abhängigkeit dieser zu definieren. Mit der Einstellung
html {font-size: 62.5%;}erreicht man eine Schriftgröße, die auf fast allen Bildschirmen und unter verschiedenen Betriebssystemen etwa einer 10pt Schrift entspricht.
Alle weiteren Schriftgrößen werden nun in der Einheit em definiert, wobei 1em der Basisschriftgröße entspricht. D.h. 1.2em etspricht etwa einer 12pt Schrift.
h3 {font-size: 1.2em;}Dabei ist zu beachten, dass sich die Definitionen vererben und sich eine relative Definition stets auf das Elternelement bezieht.
Schriftgrößenvergleich- Links & Gestaltung
Links sind ganz wichtige Elemente bei Internetauftritten und können in vielfältiger Weise gestaltet werden. Jedoch sollte hier mit Augenmaß vorgegangen werden, damit nicht unschöne Effekte auftreten:
- Keine Schriftgrößenänderungen, damit der Text nicht zu springen beginnt und neu umgebrochen wird, dies erschwert die Orientierung auf der Seite.
- Keine Änderung der Schriftstärke, dies würde zu den selben Effekten wie oben führen.
- Besuchte und unbesuchte Links deutlich unterscheiden.
- Hover-Efekte sparsam einsetzen, am besten nur in Menüs.
- Weniger ist mehr: dezente Farbänderungen passen besser in das Gesamtbild, dabei sollte darauf geachtet werden, dass die Links nicht mit Überschiften verwechselt werden.
Die Definition für alle Links könnte so aussehen:
a {font-weight:bold; text-decoration:underline; color:#990000}dabei wird der Link fett, rot und unterstrichen dargestellt.
Nun sollen bereits besuchte Links nicht unterstrichen dargestellt werden (dieser Effekt ist Browserabhängig und funktioniert leider nicht immer), daher wurde auch der Hover-Effekt aktiviert:
a:link {} a:visited {text-decoration:none;} a:hover {text-decoration:none;} a:active {}Die anderen Linktypen bleiben unverändert und müssen auch nicht angeführt werden.
Besonders nett können Links mit automatisch hinzugefügten Grafiken gestaltet werden. Dazu müssen allerdings eigene Klassen erstellt werden.
- Aufzählungen & Nummerierungen
Listen stellen heute ein sehr mächtiges und attraktives Gestaltungselement von Webauftritten dar. Durch verschiedene vordefinierte Stile oder eigene Symbole können Listen individuell angepasst werden.
ul {list-style-type:circle;}Folgende Werte können gesetzt werden: none, circle, square, disc, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman, lower-greek. (Es reicht auch die Kurzform list-style zu verwenden.)
Eine eigene Grafik als Aufzählungszeichen kann gesetzt werden durch:
ul {list-style-image:url(star16.png);}Hierbei ist zu beachten, dass die Größe der Grafik jener der Schrift angepasst wird, so dass es nicht zu unschönen Verschiebungen kommt.
- Tabellen & Rahmen
Nach dem Siegeszug von Tabellen als layoutbestimmendes Element, sollten diese heute nur mehr für tabellarische Auflistungen genutzt werden. Durch die Vielzahl von anwendbaren CSS-Eigenschaften können diese Daten optisch in den Vordergrund gerückt werden oder elegant Information preisgeben.
Durch Rahmen können die einzelnene Eintragungen voneinander getrennt werden. Dabei muss unterschieden werden zwischen einem Rahmen für die ganze Tabelle, d.h. das table-TAG bekommt einen Rahmen:
table {border:medium solid blue;}Es wird wieder die Kurzschreibweise verwendet um die Dicke, die Art und die Farbe des Rahmens festzulegen; selbstverständlich kann auch jede Eigenschaft einzeln definiert werden.
Aber auch jede einzelne Zelle kann mit einen Rahmen versehen werden, dann muss die Definition allerdings der Zelle, also dem td-TAG zugewiesen werden:
td {border:thin dotted yellow;}Die Definition einer Hintergrundfarbe für eine Zelle oder ganze Zeile kann diese auch deutlich kennzeichnen:
tr {background-color:pink;}Mehr Luft bringt man in die Tabelle, indem der Abstand des Textes zum Zellenrand vergößert wird:
td {padding:5px;}Sollen hingegen die einzelnen Zellen voneinener einen
Sicherheitsabstand
einhalten, so muss der Außenabstand vergrößert werden. Vorsicht margin funktioniert hier nicht!table {border-spacing:10px;}Sollen
leere Zellen
angezeigt werden, d.h. Hintergrundfarbe und Rahmen erhalten bleiben, so muss dies dem Browser mitgeteilt werden. Verschiedene Browser behandelnleere Zellen
unterschiedlich.table {empty-cells:show;}Sollen
leere Zellen
hingegen nicht angezeigt werden, d.h. Hintergrundfarbe und Rahmen sollen verschwinden, so wird die Eigenschaft auf hide gesetzt.table {empty-cells:hide;}Eine Tabelle kann aber auch kompakter gestaltet werden, indem kein Abstand zwischen den Rahmen erzeugt wird, sondern diese zusammenfallen:
table {border-collapse:collapse;}Soll der Abstand bewusst gesetzt werden, so muss der Eigenschaft der Wert seperate zugewiesen werden.
table {border-collapse:seperate;}Die Verwendung der Pseudoklasse hover gibt auch einen recht netten Effekt:
tr:hover {background-color:aqua;}- Verschachtelte Definitionen
Bis jetzt haben wir uns darauf beschränkt einzelnen (X)HTML-TAGs ein neues Erscheinungsbild zu verleihen. Durch CSS-Definitionen wurden die Eigenschaften von einzelnen Objekten verändert. Oft reichen diese Möglichkeiten leider nicht aus, um ein ansprechendes Layout zu gestalten. Betrachtet man die Definition einer Liste, so legt man mit der Definition das Aussehen ALLER Listen fest. D.h. es ist nicht mehr möglich eine Liste in einer Liste (normalerweise eingerückt und ein anderes Aufzählungszeichen) zu erkennen. Dieser Unterschied kann durch verschachtelte CSS-Definitionen erreicht werden:
ul {list-style-type:circle;} ul ul {list-style-type:square; margin-left:100px;}- Klassen
Reichen die vorgegebenen (X)HTML-TAGs nicht aus und möchte man besondere Formatierungen öfter in einem Dokument verwenden, so bieten die Klassendefinitionen strukturelle Erweiterungen zu etablieren. Klassen sollten nicht dazu missbraucht werden, um Formateigenschaften zuzuweisen, sondern sollten im Sinne der Struktur eines Dokuments verwendet werden.
Möchte man einzelne Worte in einem Satz grün schreiben, so sollte nicht eine Klasse
gruen
erstellt werden, denn dies kann keinem Strukturelement der Seite zugeordnet werden. Aber es könnte eine KlasseHinweis
erstellt werden, die auch grüne Schrift erzeugen soll, aber nun mit einer Dokumentstruktur verknüpft werden kann..hinweis {color:green;}Diese Definition kann mit allen (X)HTML-TAGs verwendet werden und ist somit universell einsetzbar.
Möchte man hingegen eine Klasse nur für ein bestimmtes TAG definieren, so ist dies auch möglich und erhöht ein wenig die Übersichtlichkeit:
p.merksatz{border:thin; border-style:solid; border-color:red; padding:5px; background-color:#FF99FF; color:blue; letter-spacing:1pt;}Diese Definition kann nur auf Absätze, also p-TAGs angewendet werden.
Die Verwendung in der (X)HTML-Datei erfolgt über folgenden Eintrag:
<p class="merksatz">CCS und HTML bieten ... <p>
- ID-Selector
Soll ein Objekt ganz speziell layoutiert werden, so muss dieses eine eindeutige Kennzeichnung erhalten. Dies kann auf ähnliche Weise, wie bei den Klassen erfolgen, jedoch sollte das so gekennzeichnete TAG nur ein einziges Mal innerhalb der (X)HTML-Seite auftreten. Dem Objekt wird eine eindeutige ID zugewiesen:
<p id="motto">Wir machen es besser!<p>
Die Formatdefinition erfolgt wie bei den Klassen, nur dass der trennende Punkt durch ein Nummern-Symbol ersetzt wird:
p#motto{background-color:maroon; color:yellow; font-family:Broadway, sans-serif; font-size:2em; padding:1.2em;}- span & div
Diese beiden (X)HTML-TAGs entfalten mittels Klassen und IDs ihre wahre Größe. Beide TAGs besitzen kein spezielles Aussehen und werden von den meisten Browsern quasi ignoriert. D.h. das span-TAG erscheint, als Inline-Element, als normaler Fließtext und das Block-Element div, erscheint als normaler Absatz ohne besondere Auszeichnung. Mittels Klassen bzw. IDs können nun diese unscheinbaren TAGs neues Format erlangen.
span.fehlermeldung {background-color:yellow; color:red;} div#box {border:medium red solid; background-color:aqua; padding:7px; margin:60px; width:180px;}- Boxen
Die im obigen Abschnitt angesprochenen Boxen (rechteckige Bereiche) werden heute, wegen ihrer Vielseitigkeit zur Gestaltung der meisten Webseiten genutzt. Mit ihrer Hilfe können Objekte genau positioniert und am Schirm ausgerichtet werden. Dies ermöglicht es Bereiche für Kopf- und Fußzeilen, Menüs und Inhalt festzulegen. Die unzähliche Eigenschaften erlauben es jeder Box ihr spezielles Design und Verhalten zuzuweisen.
Ein paar dieser Möglichkeiten sollen nun vorgestellt werden, wobei viele dieser Einstellmöglichkeiten miteinander kombiniert werden können und so wieder neue Erscheinungsformen zulassen. Damit die Maße der Boxen leichter nachvollzogen werden können, sollte stets der Aufbau jeder Box im Hinterkopf gehalten werden (Abb. von selfhtml.de)
Leider halten sich nicht alle Browser an diese Nomenklatur, so dass es gelegentlich zu Abweichungen kommen kann.
Zu den Grundeinstellungen jeder Box gehören ihre Breite und Höhe, damit die Ausmaße der Box deutlich sichtbar werden, soll noch ein dünner roter Rahmen die Box umschließen:
div {width:200px; height: 150px; border: thin solid red;}Nun soll die Box an eine bestimmte Position gerückt werden und zwar soll sie von der linken oberen Bildschirmecke einen linken Abstand von 110px und einen oberen Abstand ebenfalls von 110px aufweisen, d.h. nach rechts und nach unten verschoben werden:
div {position:absolute; left:110px; top:110px; width:200px; height:150px; border:thin solid red; background-color:yellow;}Damit die vorhandene Information nicht von der Box überdeckt wird, soll nun die Box relativ zum letzten Blockelement (Absatz) positioniert werden.
div {position:relative; left:50px; top:50px; width:200px; height:150px; border:thin solid red; background-color:yellow;}Die Box kann horizontal zentriert werden, indem der Browser den seitlichen Abstand automatisch ermittelt:
div {margin-left:auto; margin-right:auto; width:200px; height:150px; border:thin solid red; background-color:yellow;}Enthält eine Box mehr Text als sie aufnehmen kann, so ist es vom Browser abhängig wie die Darstellung erfolgt. Manche Browser schreiben den Text einfach über den Rand, andere vergrößern die Box.
Damit die Box mitwachsen kann, darf keine Höhe angegeben werden:
div {margin-left:auto; margin-right:auto; width:200px; /* height:150px; <<< Kommentar! */ border:thin solid red; background-color:yellow;}Soll aber die Box ihre Größe behalten und dennoch den gesamten Inhalt sichtbar darstellen, so kann eine Bildlaufleiste das Problem beheben:
div {margin-left:auto; margin-right:auto; width:200px; height:150px; border:thin solid red; background-color:yellow; overflow:auto;}Der Innenabstand zwischen Text und Rahmen kann mit padding festgelegt werden:
div {margin-left:auto; margin-right:auto; width:200px; height:150px; border:thin solid red; background-color:yellow; padding:10px; overflow:auto;}Soll der Bereich hinter der Box durchscheinen, so kann die Hintergrundfarbe der Box transparent (opacity - ab CSS 3) gesetzt werden:
body {background: gray url(../basics/bg.jpg);} div {margin-left:auto; margin-right:auto; width:200px; height:150px; border:thin solid red; background-color:yellow; opacity:0.6; padding:10px; overflow:auto;}Eine nette Spielerei bilden Boxen mit Hoover-Effekt:
div#mybox {position: relative; width:200px; height: 150px; margin-left: auto; margin-right: auto; background-color:#ff0000;} div#mybox:hover {background-color:#00ffff;}- Verschachtelte Boxen
In diesem einfachen Beispiel soll gezeigt werden, wie die Definitionen ineinander greifen und mehrerer Boxen ein stimmiges Layout bilden können. Dazu werden vorerst drei voneinander unabhängige Boxen definiert, jede mit einer anderen Hintergrundfarbe belegt, um sie besser identifizieren zu können.
Die zugehörige (X)HTML-Datei:
<body> <div id="container">In diesen Bereich sollen später die beiden Boxen eingefügt werden ....</div> <div id="maintext">Dieser Bereich bildet das Hauptfenster.</div> <div id="menu">In diesem schmalen Bereich könnte man ein Menü einfügen.</div> </body>
mit den passenden CSS-Definitionen:
div#container { width:340px; /* die Breite des Containers wird festgelgt */ margin: 20px auto; /* der obere/untere-Abstand wird mit 20px festgelgt, li/re-Positionierung erfolgt automatisch */ text-align: left; /* die Textausrichtung wird auf links gesetzt */ padding:20px; /* der innere Abstand wird mit 20px festgelegt */ background-color:#66FFFF;} /* Hintergrundfarbe türkis */ div#maintext { padding: 20px; /* der Abstand des Textes vom Rand der Box wird festgelegt */ width:180px; /* die Breite der Box wird festgelegt */ height:150px; /* die Höhe der Box wird festgelegt */ overflow:auto; /* notwendige Scrollleisten werden eingeblendet */ background-color:#FFFFCC;} /* Hintergrundfarbe hellgelb */ div#menu { float: right; /* die Box schwimmt an den rechten Rand des uebergeordneten Elements --> Container */ width: 50px; /* die Breite der Box wird festgelegt */ height:150px; /* die Höhe der Box wird festgelegt */ padding: 20px; /* der Abstand des Textes vom Rand der Box wird festgelegt */ background-color:#CCCCCC;} /* Hintergrundfarbe grau */Nun werden die beiden Boxen menu und maintext in den Container gepackt und schon ist unsere Seite fertig.
Die Reihenfolge der einzelnen Boxen ist dabei zu beachten, da die Menübox nach rechts schwimmen soll, muss dazu Platz sein, d.h. diese muss zuerst in der (X)HTML-Datei definiert werden. An der CSS-Datei müssen keine Änderungen mehr vorgenommen werden.
<body> <div id="container"> <div id="menu">In diesem schmalen Bereich könnte man ein Menü einfügen.</div> <div id="maintext">Dieser Bereich bildet das Hauptfenster.</div> </div> </body>- Boxmodell
Dieser Workshop zeigt die Entwicklung eines Internetauftritts. Aus wenigen Boxen wird Schritt für Schritt durch Erweiterung der CSS-Definitionen und geringfügige Anpassungen an der (X)HTML-Struktur ein Grundgerüst für einen Menügesteuerten Webauftritt. Die Änderungen und Ergänzungen können den einzelnen Musterbeispielen und ausgegebenen Texten entnommen werden. Jeder Schritt ist durch eine eigene (X)HTML-Datei mit der zugehörigen CSS-Datei dokumentiert.
id_01.css id_01.html id_02.css id_02.html id_03.css id_03.html id_04.css id_04.html id_05.css id_05.html id_06.css id_06.html id_07.css id_07.html id_08.css id_08.html id_09.css id_09.html id_10.html - Objekte übereinander
Durch relative oder absolute Positionierung können Objekte auch übereinander gelegt werden. Die Reihenfolge wird durch die Anordnung im Quelltext festgelegt, so dass das zuletzt definiete Objekt an oberster Stelle zu liegen kommt und die anderen Objekte überdeckt. Jedes Objekt erhält automatisch vom Browser einen
z-indexWert zugewiesen, wenn das Objekt keinen besitzt. Durch die manuelle Festlegung eines Wertes, kann die Reihenfoge beeinflusst werden. Das Objekt mit dem größtenz-indexWert überdeckt die anderen.Einen besonders netten Gestaltungseffekt bietet die Eigenschaft
opacity, die Werte zwischen 0 und 1 zulässt und die Deckkraft des Objekts festlegt. 0 entspricht völlig durchsichtig - also unsichtbar, 1 bedeutet ganz undurchsichtig.Diese Eigenschaft wurde erst mit CSS Version 3 definiert, so dass ältere Browser eigene Definitionen benötigen.
baustelle.png flugzeug.png stop.png ueberholen.png zindex-01.html zindex-02.css zindex-02.html zindex-03.css zindex-03.html zindex-04.css zindex-04.html zindex-12.css zindex-12.html zindex-14.css zindex-14.html - Formulare formatieren
Eingabefeld mit Hintergrundfarbe und bunter Schrift:
input {background-color:#FFFFCC; color:blue;}
Eingabefeld mit Rahmen und größerer Schrift:
input {background-color:#FFFFCC; color:blue; border:thin solid yellow; font-size:16pt;}
Textfeld mit Rahmen und Hintergrundbild:
textarea {background:pink url(bilder/bleistift100.png) no-repeat right bottom;; color:red; border:thick outset red; font-size:14pt; font-family:'Lucida Handwriting';
Button mit Hintergrundfarbe und bunter Schrift:
input {background-color:lightgreen; color:darkgreen; border:medium outset green; font-style:italic; font-weight:bold; padding:5px;}
- Überprüfen
Um die korrekte Programmierung und dadurch die optimale Anzeige in vielen Browsern sicher zu stellen, können die (X)HTML-Seiten und CSS-Definitionen einer Onlineüberprüfung unterzogen werden. Dabei werden neben Tippfehleren auch oft unvollständige TAGS oder Definitionen aufgespürt.
- Literatur
Kobert, Thomas
Das Einsteigerseminar CSS
cascading style sheets
1. Aufl. - Heidelberg : bhv 2007
ISBN 9783826674686
Maurice, Florence
HTML & CSS
1. Aufl. - München : markt + technik 2010
ISBN 9783827245786
Münz, Stefan; Gull, Clemens
HTML5-Handbuch
Poing : Francis 2010
ISBN 9783645600798
Seibert, Björn; Hoffmann, Manuela
Professionelles Webdesign mit (X)HTML und CSS
[modernes Webdesign mit Webstandards ; Farbe, Grafik und Typ
1. Aufl. - Bonn : Galileo Press 2008
ISBN 9783836211048
Sigos, David
CSS für Kids
1. Aufl. - Heidelberg : bhv 2007
ISBN 9783826686368
Teague, Jason Cranford
CSS3
der Meisterkurs
1. Aufl. - München : Markt + Technik 2011
ISBN 9783827247360
Wetsch, Elisabeth
Einstieg in CSS
Grundlagen und Praxis
2. Aufl. - Bonn : Galileo Press 2010
ISBN 9783836214667
- Links
