Styles
Den Stil festlegen mit dem <style>-Attribut
Spätestens, wenn man über die ersten Experimente mit HTML hinaus ist und sich ernsthaft daran macht, eine eigene Webpage zu gestalten, wird man sich fragen, wie soll der Stil der eigenen Seite sein. Und wenn man ein bisschen mehr unterschiedlich formatierten Text und viele andere Elemente hat, ist man es bald leid, immer die gleichen Formatierungsanweisungen zu schreiben oder gar einmal alle probehalber zu ändern, nur um zu sehen, wie eine andere Farbe oder Schrift wirkt.
An diesem Punkt kommt man zum <style>-Attribut. Dieses erlaubt es, den Inhalt eines Elements individuell mit dem im Dateikopf angegebenen Stil bzw. mit CSS (=Cascading Style Sheets) zu formatieren. Sogar eine Direktformatierung im <body> ist möglich.
Hier ein Beispiel für eine Formatierung direkt im <body> (Quelle: selfhtml)
Unser Kopf ist rund, damit das Denken die Richtung wechseln kann!
Und hier der Code dazu:
font-family:'Century Schoolbook',serif; font-size:24pt; letter-spacing:3px;
padding:40px; border:double #D8FD02 4px;"
title="Zitat von Francis Picabia">
Unser Kopf ist rund, damit das Denken die Richtung wechseln kann!</p>
Man sieht, dass dem Absatz Hintergrundfarbe, Texteigenschaften bis hin zum Buchstabenabstand und Rahmeneigenschaften zugewiesen wurden. Der eigentliche Text ist kürzer als die Anweisungen!
Nun wird man nicht für jeden Absatz ausgefeilte und insbesondere unterschiedliche Formatierungen zuweisen, sondern bestimmten Elementen diese Eigenschaften fest zuweisen. Dazu kann man diese Eigenschaften der Elemente im <head> im <style>-Attribut festlegen. Zum Beispiel:
<head>
<title>Titel der Datei</title>
<style type="text/css">
body { background-color:#000000; color:#FFFF00; }
h1 {font-size:24px; color:#FF0000;}
</style>
</head>
In dem Beispiel wird nur die Eigenschaften Hintergrund- und Textfarbe des <body> und der Überschrift1 festgelegt. (Beispiel anzeigen)
Den Stil in eine externe CSS-Datei auslagern
Allerdings besteht immer noch ein Problem: Die Stilzuweisung gilt nur für die aktuelle Datei, d. h. sie müsste in alle anderen Dateien, in denen sie auch gelten soll, kopiert werden. Dieses Problem lösen Stylesheets. Das sind Dateien, die nur dazu dienen, das Aussehen von Elementen in HTML-Dateien zu beschreiben. In den entsprechenden Dateien steht dann nur ein Verweis auf dieses Stylesheet. Die Stylesheets sind plattformunabhängige reine Textdateien, die mit der Erweiterung .css (= Cascading Style Sheet) abgespeichert werden.
Um ein Stylesheet in eine Datei einzubinden, schreibt man zum Beispiel in den <head> der Datei:
Im Beispiel liegt die CSS-Datei formate.css im selben Verzeichnis wie die Datei, die die CSS-Datei einbindet.
Nun kann, natürlich wenn man eine CSS-Datei geschrieben hat, nach Herzenslust am Design der Webpage experimentiert werden - eine Änderung einer Eigenschaft in der CSS-Datei wirkt sich sofort auf das Aussehen aller Dateien im Web aus!
