Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / Cascading Style Sheets (css)


Mit css (cascading style sheets) werden im wesentlichen fünf Ziele verfolgt.
css definieren: Innerhalb des Kopfbereiches der HTML Seite
Stylesheets über Klasssen definieren
Diskriminierung nach der Stellung des Elementes
Formatierungen in Ahängigkeit der Attribute des Elements
Eine Formatierungen in Abhängigkeit vom Wert des Attributes
Zuweisung einer Formatierung in Abhängigkeit vom Teil des Inhaltes des Attributes
css Formate direkt im html tag definieren
css Formatierungen in eine externe Seite auslagen

Mit css (cascading style sheets) werden im wesentlichen fünf Ziele verfolgt.

1. Mit css läßt sich das Design aller Seiten einer Website zentral definieren. Es ist dann nicht mehr nötig, mittels der traditionellen tags und deren Attribute wie font, bgcolor, background, size etc. etc. das Design in jeder Seite zu definieren und somit redundanten, überflüssigen Code zu produzieren.
2. Mit css lassen sich Elemente graphisch beeinflussen, die sich ohne css gar nicht beinflussen ließen, wie z.B. die Scroll Leisten des Fensters, der Hintergrund eines Formularelementes, Zuweisung eines Rahmens für div Bereiche etc. etc.
3. Oft erweitern css die designerischen Möglichkeiten. Zum Beispiel hat man mehr Möglichkeiten den border einer Tabelle zu gestalten, es stehen mehr Schriftgrößen zur Verfügung, man hat viel mehr gestalterische Möglichkeiten bei Hyperlinks etc. etc.
4. Css lassen sich dynamisch über JavaScript verändern. Auf diese Art und Weise können dann alle möglichen optischen Effekte erzielt werden.
5. Mit css lassen sich auch die durch den <div> definierte Bereiche ansprechen. So ist ein pixelgenaues Positionnieren von Elementen möglich.

Mit css wurde in diesem Handbuch immer mal wieder gearbeitet, z.B. im Kapitel Rollover et alter. Wir werden hier das Wesentliche zu css kurz erläutern, allerdings nur soweit, wie es für das Verständnis des folgenden Kapitels Zugriff auf Cascading Style Sheets mit JavaScript notwendig ist. Zu css werden wir in Kürze ein Handbuch schreiben.

css definieren: Innerhalb des Kopfbereiches der HTML Seite

Üblicherweise werden css im Kopfbereich der HTML Seite definiert, das sieht dann so aus.

<html><head><title>css</title>
<style type=text/css>
....
irgendwelche css Definitionen
....

</style>
</head><body>
toll !
</body></html>

Mit der Zeile <type=text/css> geben wir also an, dass die stylesheet Definition beginnt und mit </style> geben wir an, dass sie endet. Bezogen auf ein konkretes Beispiel sieht das dann so aus.

<html><head><title>exempla statut</title>
<style type=text/css>
#karotte{position:absolute; top:10 px;
left:10 px; background-color:yellow;height:8cm;
width=9cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;}
</style>
</head>
<body>
<html><head><title>Matthias Claudius</title></head>
<body>
<div id="karotte">

Der Mond ist aufgegangen<br>
die goldenen Sternlein prangen<br>
am Himmel hell und klar<br>
Der Wald steht schwarz und schweiget<br>
und aus den Wiesen steiget<br>
der weisse Nebel wunderbar<br><br>

Seht ihr den Mond dort stehen <br>
er ist nur halb zu sehen<br>
und ist doch rund und schön<br>
so gehts mit vielen Sachen<br>
die wir getrost verlachen<br>
weil unsere Augen sie nicht sehen<br>

</div>
</body>
</html>

Das sieht dann so aus: exempla statut. Wenn auch die Details, auf die wir gleich noch zu sprechen kommen, etwas verwirrend sind, so ist es im grossen und ganzen eigentlich einfach. Mit #karotte{ die css } definieren wir ein Stylesheet für alle Elemente dieser Id, wobei jedem Element eine Id zugewiesen werden kann.

Stylesheets über Klasssen definieren

Definiert man ein Stylesheet über eine Id, dann ist es nur für die Elemente gültig, die als zu dieser Id zugehörig definiert wurden. Definiert man ein Stylesheet für eine Klasse, dann gilt das Stylesheet für alle Elemente dieser Klasse. Schauen wir uns ein Beispiel an, dass die Stylesheets einer Klasse zuordnet.

<html><head><title>exempla statut</title>
<style type=text/css>
table{
background-color:yellow;height:8cm;
width=9cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}

td {
background-color:gold;font-family:Tahoma;
font-size:14px;font-weight:bold;
}

td.titel {
font-size:16px;
}

td.autor {
text-align:right;
}

</style>
</head>
<body>
<html><head><title>Fixiertes Element</title></head>
<body>
<table>
<tr><td class="titel"> Der Mond ist aufgegangen</td></tr>
<tr><td class="autor">Mathias Claudius</td></tr>
<tr><td>

Der Mond ist aufgegangen<br>
die goldenen Sternlein prangen<br>
am Himmel hell und klar<br>
Der Wald steht schwarz und schweiget<br>
und aus den Wiesen steiget<br>
der weisse Nebel wunderbar<br><br>

Seht ihr den Mond dort stehen <br>
er ist nur halb zu sehen<br>
und ist doch rund und schön<br>
so gehts mit vielen Sachen<br>
die wir getrost verlachen<br>
weil unsere Augen sie nicht sehen<br>
</td></tr></table>
</body>
</html>

Das sieht dann so aus Wer Augen hat zu schauen, der staune!. Unter der Voraussetzung, dass man es geschickt macht, lässt sich also eine Formatierung sehr Code minimierend durchführen. Am Anfang definieren wir einen Stylesheet für die gesamte Tabelle. Dann definieren wir ein Stylesheet für die td, die Zelle. Wie deutlich sichtbar, überdeckt das css der Zelle das css der Tabelle, den der Hintergrund der Zelle ist gold, während er in der Tabelle gelb ist, was wir noch erkennen, weil das gelb im Abstand der Zellen zueinander durchschimmert. Für td definieren wir noch zwei Unterklassen, nämlich titel und autor. Mit class="autor" bzw. class="titel" als Attribut der entsprechenden Zellen, weisen wir das entsprechende Stylesheet den entsprechenden Zellen zu. Da autor bzw. titel Unterklassen der Klasse td sind, kann titel bzw. autor nur beim Element td erscheinen, bzw. nur beim Element td wird das entsprechende Stylesheet zugewiesen. Würde man es für z.B. für tr verwenden, hätte dies keine Auswirkung. Wir sehen weiter, dass die Unterklassen autor bzw. titel alle Eigenschaften von der Klasse td erben. Alle css Formatierungen, die dort definiert sind, gelten auch in deren Unterklasse, wie man ja deutlich sieht. Der Witz bei der Bildung von Klassen und Unterklassen besteht also darin, dass die Unterklassen von den Klassen erben, was den Schreibaufwand reduziert. Sinnvollerweise deklariert man also immer zuerst eine Klasse, die alle wesentlichen Festlegungen enthält und definiert dann in den Unterklassen die Abweichungen. Definieren wir also eine Klasse als Unterklasse einer anderen Klasse, kann diese Klasse nur innerhalb dieser Klasse verwendet werden. Definieren wir aber eine Klasse nicht als Klasse einer Unterklasse, dann kann diese Klasse überall verwendet werden. Läßt man man feinsinnige Unterscheidungen aussen vor, ist in diesem Falle die Definition einer Klasse hinsichtlich der Wirkung und den Möglichkeiten mit der Definition einer Id identisch. Betrachten wir folgenden Beispiel.

<html><head><title>exempla statut</title>
<style type=text/css>
table{
background-color:yellow;height:8cm;
width=9cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}

td {
background-color:gold;font-family:Tahoma;
font-size:14px;font-weight:bold;
}

.titel {
font-size:16px;
}

.autor {
text-align:right;
}

#interpretation {
font-size:10px;font-weight:bold,text-decoration:underline; background-color:wheat;
}

</style>
</head>
<body>
<html><head><title>Fixiertes Element</title></head>
<body>
<table>
<tr><td class="titel"> Der Mond ist aufgegangen</td></tr>
<tr><td class="autor">Mathias Claudius</td></tr>
<tr><td>geschrieben so um 1778</td></tr>
<tr><td id="interpretation">==> Hinweis zur Interpretation: Das hässliche Entlein</td></tr>
<tr><td>Der Mond ist aufgegangen<br>
die goldenen Sternlein prangen<br>
am Himmel hell und klar<br>
Der Wald steht schwarz und schweiget<br>
und aus den Wiesen steiget<br>
der weisse Nebel wunderbar<br><br>

Seht ihr den Mond dort stehen <br>
er ist nur halb zu sehen<br>
und ist doch rund und schön<br>
so gehts mit vielen Sachen<br>
die wir getrost verlachen<br>
weil unsere Augen sie nicht sehen<br>
</td></tr></table>
</body>
</html>

Das sieht dann so aus: Wer sich nicht wundern kann, der kann nicht philosophieren Wie deutlich zu sehen, wurde titel und autor nicht mehr als Unterklasse der td Klasse eingerichtet sondern allgemein. Trotzdem funktionniert es. (Man kann also durch die Definition einer Unterklasse verhindern, dass diese Klasse irdenwo verwendet wird, wo sie nicht hingehört. Praktisch gesehen ist das alles etwas bedeutungslos. Man kann Klassen eigentlich immer als allgemein definieren.) Weiter sehen wir, dass man das gleiche, was mit einer Klasser erreicht wird, auch mit der Definition einer Id erreicht werden kann. Bei "==>Hinweis zur Interpretation: Das hässliche Entlein" wurde nicht, wie im Beispiel zuvor, mit der Klasse gearbeitet, sondern mit einer Id. Auch hier werden erstmal alle Formatierungen der Klasse td übernommen. Die dann zweimal oder gar nicht vorhanden sind, werden durch die Formatierungen der Id Deklaration überschrieben. Noch eine Bemerkung zu Ids. Bei XML und im document object model werden mit Ids Elemente eindeutig charakterisiert. Man könnte nun versucht sein zu glauben, dass bei css etwas ähnliches passiert. Das ist tatsächlich nicht der Fall. Diesselbe Id kann mehrere Male verwendet werden, wobei das eben keine gut Idee ist, wenn man vorhat das HTML Dokument mit der dom Sichtweise zu parsen. Wir zeigen das nochmal anhand eines Beispiels.

<html><head><title>exempla statut</title>
<style type=text/css>
table{
background-color:yellow;height:8cm;
width=9cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}

td {
background-color:gold;font-family:Tahoma;
font-size:14px;font-weight:bold;
}

.titel {
font-size:16px;
}

.autor {
text-align:right;
}

#interpretation {
font-size:10px;font-weight:bold,text-decoration:underline; background-color:wheat;
}

</style>
</head>
<body>
<html><head><title>Fixiertes Element</title></head>
<body>
<table>
<tr><td class="titel"> Der Mond ist aufgegangen</td></tr>
<tr><td class="autor">Mathias Claudius</td></tr>
<tr><td td id="interpretation">geschrieben so um 1778</td></tr>
<tr><td id="interpretation">==> Hinweis zur Interpretation: Das hässliche Entlein</td></tr>
<tr><td>Der Mond ist aufgegangen<br>
die goldenen Sternlein prangen<br>
am Himmel hell und klar<br>
Der Wald steht schwarz und schweiget<br>
und aus den Wiesen steiget<br>
der weisse Nebel wunderbar<br><br>

Seht ihr den Mond dort stehen <br>
er ist nur halb zu sehen<br>
und ist doch rund und schön<br>
so gehts mit vielen Sachen<br>
die wir getrost verlachen<br>
weil unsere Augen sie nicht sehen<br>
</td></tr></table>
</body>
</html>

Wer wissen will, wie das aussieht, kann hier clicken. Dass die Unterscheidung zwischen Ids und Klassen etwas verschwommen ist, zeigt sich auch daran, dass es Bemühungen gibt, sie endgültig verschwimmen zu lassen. Inzwischen, ab den sechser Versionen der jeweiligen Browser, können nämlich auch mit Ids Unterklassen gebildet werden, das heisst, wir erhalten das gleiche, wie oben. Ist die Id eine Unterklasse, dann kann sie nur innerhalb ihrer Klasse verwendet werden, dass heisst, sie kann dann nur ihre Mutterklasse modifizieren. Ist sie alleinstehend deklariert, kann sie jede andere Klasse modifizieren. Wir zeigen noch mal anhand eines Beispieles die Syntax für den Fall, dass eine Untegruppe mit einer Id gebildet wird.

<html><head><title>exempla statut</title>
<style type=text/css>
table{
background-color:yellow;height:8cm;
width=9cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}

td {
background-color:gold;font-family:Tahoma;
font-size:14px;font-weight:bold;
}

td#titel {
font-size:16px;
}

td#autor {
text-align:right;
}

#interpretation {
font-size:10px;font-weight:bold,text-decoration:underline; background-color:wheat;
}

</style>
</head>
<body>
<html><head><title>Fixiertes Element</title></head>
<body>
<table>
<tr><td id="titel"> Der Mond ist aufgegangen</td></tr>
<tr><td id="autor">Mathias Claudius</td></tr>
<tr><td td id="interpretation">geschrieben so um 1778</td></tr>
<tr><td id="interpretation">==> Hinweis zur Interpretation: Das hässliche Entlein</td></tr>
<tr><td>Der Mond ist aufgegangen<br>
die goldenen Sternlein prangen<br>
am Himmel hell und klar<br>
Der Wald steht schwarz und schweiget<br>
und aus den Wiesen steiget<br>
der weisse Nebel wunderbar<br><br>

Seht ihr den Mond dort stehen <br>
er ist nur halb zu sehen<br>
und ist doch rund und schön<br>
so gehts mit vielen Sachen<br>
die wir getrost verlachen<br>
weil unsere Augen sie nicht sehen<br>
</td></tr></table>
</body>
</html>

Das Beispiel ist mit dem Beispiel, dass die Formatierung von Klassen und Unterklassen zeigt weitgehend idendisch. Lediglich der Punkt wurde durch einen Gartenzaun ersetzt, also anstatt td.autor td#autor. Weider wurde das entsprechende Stylesheet nicht mit class="autor" sondern mit id="autor" aufgerufen. Der Unterschied zwischen einer Klasse und einer Id dürfte also bezüglich css zumindest für die Praxis ziemlich bedeutungslos sein.

Diskriminierung nach der Stellung des Elementes

Es kann sein, dass ein bestimmtes Konstrukt aus HTML Elementen immer wieder vorkommt. In diesem Konstrukt wird das gleiche HTML Element zweimal verwendet, einmal allein stehend und einmal umklammert von einem anderen Element. Man kann jetzt wollen, dass das umklammerte eine andere Formatierung erhält als das alleinstehende. Unstrittig ist, dass man das auch dadurch erreichen könnte, indem man dem Umklammerten eine andere Unterklasse zuweisst. Das hat aber den Nachteil, dass man diese mit der Hand immer wieder da rein schreiben muss, was bei längeren HTML Dokumenten ja umständlich ist. Deshalb gibt es hier eine Möglichkeit, genauer zu diskriminieren und je nachdem ob das HTML Element alleine steht oder von einem anderen umklammert ist, eine andere Formatierung zuzuweisen.

<html><head><title>exempla statut</title>
<style type=text/css>
table{
background-color:yellow;height:6cm;
width=10cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}

td {
background-color:gold;font-family:Tahoma;
font-size:12px;font-weight:bold;
}

hr {border:solid #ff0000 1px;
background-color:#00ffff;height:4px;margin:30px 0px;}

td hr {border:solid green 1px;
background-color:yellow;height:2px;margin:3px 0px;}


</style>
</head>
<body>
<hr>
<table>
<tr><td>
Der Tag entwich, die Dämmerung brach ein <br>
er nahm den Wesen die auf Erden leben all Ihre Mühsal ab<br>
nur ich allein hielt mich bereit, das Ringen anzuheben<br>
<hr>
Oh Musen Himmelstöchter, steht mir bei<br>
Gedächtnis das du sahst was ich gesehn<br>
jetzt offenbare deinen Adel frei<br>
<hr>
Dante Alighieri, Divina Comedia
</td></tr>
</table>
<hr>
Das ist die Übersetzung von Zossmann. Es ist mit Abstand die Beste, aber aus
dem Handel verschwunden. Alle anderen, auch die von Stefan George, sind Schrott.
</body>
</html>

Wer staunen kann, der staune hier. Wir sehen, dass für den HTML tag <hr> zweimal eine Formatierung definiert wurde, wobei die eine nur greift, wenn sich hr innerhalb von td befindet. Wir sehen also, dass wir die Feinsteuerung nicht durch eine zusätzliche Angabe einer Klasse oder Id herstellen, sondern einmalig innerhalb der css Definition.

Formatierungen in Ahängigkeit der Attribute des Elements

Im Moment ausschliesslich bei Netscape 6.0 und höher gibt es noch die Möglichkeit, die Gültigkeit einer Formatierung vom Vorhandensein eines Attributes, vom Wert eines Attributes oder vom Text innerhalb des Elementes abhängig zu machen. Das Attribut muss hierbei nicht mal ein gültiges HTML Attribut sein, es kann sogar ein selbst definiertes sein. Das folgende Beispiel zeigt eine Formatierung, die nur gültig ist, wenn das Attribut was vorhanden ist. Es funktionniert nur mit Netscape ab 6.0.

<html><head><title>exempla statut</title>
<style type=text/css>
table{
background-color:yellow;height:6cm;
width=10cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}

td {
background-color:gold;font-family:Tahoma;
font-size:12px;font-weight:bold;
}


td[was] { color:red; }

</style>
</head>
<body>
<table>
<tr><td>
Der Tag entwich, die Dämmerung brach ein <br>
er nahm den Wesen die auf Erden leben all Ihre Mühsal ab<br>
nur ich allein hielt mich bereit, das Ringen anzuheben<br><br>
Oh Musen Himmelstöchter, steht mir bei<br>
Gedächtnis das du sahst was ich gesehn<br>
jetzt offenbare deinen Adel frei</td></tr>
<tr><td was="Autor">Dante Alighieri, Divina Comedia</td></tr>

</table>
</body>
</html>

Wie das aussieht, kann man sich anschauen, indem man hier clickt. Wie deutlich zu erkennen besitzt das Element td bei "Dante Alighieri, Divina Comedia" das Phantasie Attribut was. Wir definieren ein css Stylesheet, das nur gültig ist, wenn das Element td Element das Attribut was besitzt.

Eine Formatierungen in Abhängigkeit vom Wert des Attributes

Noch präziser lässt sich über den Wert eines Attributes die Gültigkeit von Formatierungen steueren, wie folgendes Beispiel zeigt.

<html><head><title>exempla statut</title>
<style type=text/css>
table{
background-color:yellow;height:6cm;
width=10cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}

td {
background-color:gold;font-family:Tahoma;
font-size:12px;font-weight:bold;
}


td[was] { color:red; }
td[vers=eins] { color:green; }
td[vers=zwei] { color:coral; }

</style>
</head>
<body>
<table>
<tr><td vers="eins">
Der Tag entwich, die Dämmerung brach ein <br>
er nahm den Wesen die auf Erden leben all Ihre Mühsal ab<br>
nur ich allein hielt mich bereit, das Ringen anzuheben<br><br>
Oh Musen Himmelstöchter, steht mir bei<br>
Gedächtnis das du sahst was ich gesehn<br>
jetzt offenbare deinen Adel frei</td></tr>
<tr><td was="Autor">Dante Alighieri, Divina Comedia</td></tr>
<tr><td vers="zwei">
Ruht ein Lied in allen Dingen<br>
die da schlummern fort und fort<br>
und die Welt hebt an zu singen<br>
findst du nur das Zauberwort</td></tr>
<tr><td was="Autor">Clemens Brentano, romantische Lieder</td></tr>
</table>
</body>
</html>

Auch dieses Beispiel funktionniert nur mit Netscape ab Version 6.0. Mit diesem Browser sieht es dann so aus. Wie deutlich zu erkennen, haben wir für die Verse wieder zwei Phantasie Attribute, nämlich vers mit den Werten eins respektive zwei. In der CSS Definition weisen wir dann in Abhängigkeit vom Wert des Attributes vers die entsprechende Formatierung zu.

Zuweisung einer Formatierung in Abhängigkeit vom Teil des Inhaltes des Attributes

Auch das funktionniert nur mit Netscape ab Version 6.0. Mit dieser Methode können wir die Gültigkeit einer Formatierung von der Frage abhängig machen, ab innerhalb des Wertes des Attributes ein bestimmtes Wort auftaucht. Machen wir uns das an einem Beispiel klar.

<html><head><title>exempla statut</title>
<style type=text/css>
table{
background-color:yellow;height:6cm;
width=10cm;padding:1cm;border-width:5px;border-style:solid;
border-color:blue;padding:1cm;
}

td {
background-color:gold;font-family:Tahoma;
font-size:12px;font-weight:bold;
}


td[was] { color:red; }
td[vers=eins] { color:green; }
td[vers=zwei] { color:coral; }
td[zitat~=Faust] {color:hotpink; }

</style>
</head>
<body>
<table>
<tr><td vers="eins">
Der Tag entwich, die Dämmerung brach ein <br>
er nahm den Wesen die auf Erden leben all Ihre Mühsal ab<br>
nur ich allein hielt mich bereit, das Ringen anzuheben<br><br>
Oh Musen Himmelstöchter, steht mir bei<br>
Gedächtnis das du sahst was ich gesehn<br>
jetzt offenbare deinen Adel frei</td></tr>
<tr><td was="Autor">Dante Alighieri, Divina Comedia</td></tr>
<tr><td vers="zwei">
Ruht ein Lied in allen Dingen<br>
die da schlummern fort und fort<br>
und die Welt hebt an zu singen<br>
findst du nur das Zauberwort</td></tr>
<tr><td was="Autor">Clemens Brentano, romantische Lieder</td></tr>
<tr><td zitat="Kommt irgendwo aus dem Faust">Doch im Erstarren such ich nicht mein Heil<br>
das Schaudern ist der Menschheit bester Teil<br>
wie auch die Welt im das Gefühl verteure<br>
ergriffen fühlt er tief das Ungeheuere
</td></tr>
<tr><td was="Autor">Goethe, Faust I</td></tr>
</table>
</body>
</html>

Wie das aussieht, kann man sich anschauen, indem man hier clickt. Wir erkennen, dass das Wort Faust Teil des Wertes von zitat ist. In der css Definition haben wir dann den td Elementen eine spezielle Formatierung zugewiesen, bei denen "Faust" ein Bestandteil des Wertes des Attributes zitat ist.

css Formate direkt im html tag definieren

Ausser den oben dargestellten Methoden, gibt es auch noch die Möglichkeit, css Formatierungen direkt als Attrbut eines HTML Elementes zu definieren. Das macht man wohl sinnvollerweise immer dann, wenn lediglich eine Element formatiert werden soll. Ein Beispiel:

<html><head><title>css direkt Formatierung</title></head>
<body>
<table>
<tr><td style="background-color:gold;font-family:Tahoma;font-size:12px;font-weight:bold;">
Herr Keuner begegegnet einem Freund: " Sie haben sich gar nicht verändert", strahlt dieser. "Ach", sagte Herr Keuner und erblasste.
</td></tr>
<tr><td> frei nach Bertolt Brecht </td></tr>
</table>
</body>
</html>

Wie man sieht, wenn man hier clickt.

css Formatierungen in eine externe Seite auslagen

Will man mehrere Seiten einer Website oder sogar alle, über css formatieren, dann müssen die css Formatierungsangaben ausgelagert werden. Wir zeigen im folgenden einen externe css Datei und eine HTML Seite, die diese Formatiert.

Die HTML Seite

<html><head><title>Das Gedicht der grossen Welle</title>
<link href="die_welle.css" rel="stylesheet" type="text/css">
</head>
<table>
<tr><td id="kirsche">Aus der Reihe Welle im Sturm</td></tr>
<tr><td class="banane">Das Gedicht der grossen Welle <br>
<div id="name">von Andrés Ehmann</div><br> <br>
Hurschka nofza, sine tai<br>
scholem blasta, ars kanei !<br>
<hr>
kispe tara, aske tai<br>
tana hosa , kure hai ?<br>
<hr>
ei kanatak !<br>
eike hai !<br>
teika kura<br>
teika hai<br>
</td></tr>
</table>
</body>
</html>

Das CSS Stylesheet, dass diese Datei nun wiederum formatiert sieht so aus.

td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color:blue;
}

td.banane {
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: bold;
color:red;
vertical-align: top;
}

#kirsche {
font-family:Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
line-height: normal;
font-weight: bold;
color:marron;
vertical-align: top;
}

#name {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #000000;
vertical-align: top;
}

Vom Ergebnis her kennen wir das schon mehr oder weniger, es sieht so aus. Damit haben wir dann zu dem Thema wie man css Formatierungen in HTML Seiten einbindet gesagt. Es wurde nichts gesagt, welche Möglichkeiten css bietet. Wir beschränken uns auf das das, was benötigt wird um das folgende Kapitel Zugriff auf Cascading Style Sheets mit JavaScript zu verstehen.

vorhergehendes Kapitel