Es gibt mehrere Mögichkeiten, wer hätt's gedacht. Beginnen wir "vor Ort", das ist am gewohntesten, da jeweils letzte Festlegung (leider) auch am wirksamsten (überschreibt vorhergehende Festlegungen, nicht immer, aber immer öfter!) und ist im Sinne von CSS2 bzw. weitergehenden Web-Sprachen wie XHTML die mit Abstand schlechteste Lösung!
| Code-Beispiel | Erläuterung, wenn nötig | Angucker |
|---|---|---|
| <td style="color: red; background-color: green;">Beispiel 1</td> | Weil wir ohnehin in Tabellenzellen sitzen, das Beispiel dazu. Es geht seit CSS2 mit praktisch jedem Tag. | Beispiel 1 |
| <td style="background-color: yellow; border: 2px dotted red;"><img style="background-color: green; padding: 10px;" src="bilder/pfeil.gif" width="70" height="25" border="0" /></td> | Doppelbödig. Das img-Tag könnte noch einen margin erhalten, der wäre aber bis auf den Abstandseffekt nicht sichtbar, weil der Tabellenuntergrund durchschiene | |
Die style-Vergabe vor vor Ort mit dem Container-Element DIV und dem Inline-Element SPAN war mit HTML und CSS1 oftmals die letzte Rettung. Man liest oft, sie seien nur zu diesem Zeck eingeführt worden. Anders ist die Situation in XHTML und CSS2. Hier will man etwa Textarten ihrer Bedeutung nach kennzeichnen, und das geht am Besten mit diesen - aber nicht nur diesen! - nun klein zu schreibenden Tags, in Verbindung mit einer passenden Klassendefinition. Dazu das letzte Beispiel der folgenden Tabelle.
| Code-Beispiel | Erläuterung, wenn nötig | Angucker |
|---|---|---|
| <td><div style="text-align: right; color: red; background-color: green;">Beispiel2<br /> </div></td> | Der DIV-Container nimmt sich die ganze Zeile, bescheidet sich aber in der Höhe auf das Notwendige. Der untere Zuwachs gehört zum geschützten Leerzeichen. Mit einem padding-bottom ginge es natürlich auch. | Beispiel2 |
| <td>Im laufenden Text mögen wir <span style="color: #4E48FF">Farbänderungen</span> gern!</td> | So etwa, bei anderer Schreibweise der Tags im HTML der Königsweg, um das umständlichere Font-Tag zu vermeiden. Letzteres wird ja zunehmend weniger unterstützt. | Im laufenden Text mögen wir Farbänderungen gern! |
Jetzt nähern wir uns den modernen Zeiten. Wenn man mit CSS beginnt, dann am besten mit im head eingebetteten sytle-Angaben, weil man die eingebetteten style-Definition so am einfachsten in eine externe Datei verfrachten kann, was dann der Gipfel der technologischen Entwicklung ist.
| Code-Beispiel | Erläuterung, wenn nötig | Angucker |
|---|---|---|
| <style type="text/css"> ul,li{font-family:verdana,helvetica,arial; font-size:10pt; color:#000000; background-color:#64ff2b} .test{background-color:#ff7c5e; font-family:"courier new",monospace; font-size:15pt; color:#449944} </style> | Das Style-Sheet wird typischerweise aber nicht zwingend im <head>-Teil des Dokuments eingefügt. Die Defintion erfolgt mit dem <style>-Tag. So wie links könnte ein Aufruf lauten. Mehr ist nicht zu tun, für die per Style-Sheet konfigurierten Tags wird die verlangte Formatierung übernommen (falls der Browser sie akzeptiert.) Ansonsten gelten die im Browser voreingestellten Formate. Bei einander widersprechenden Formatierungsanweisungen wird jeweils die letzte übernommen | Eine Liste:
Code innerhalb der Zelle, mit <div class="test"> aufgerufen: Dies ist Code! |
Jetzt kommt es, die Methode, die CSS erst richtig sinnvoll macht. EINE CSS-Datei für die Website, VIELE Seiten, die mit wenigen Änderungen ihr Aussehen völlig verändern können: Das ist auf diese Weise möglich.
CSS-Dateien lassen sich stehlen (=nachnutzen), man kann sie kombinieren; sie lassen sich widersprüchlich aufbauen, redundant oder auch effektiv, ach was nicht noch alles!
| Code-Beispiel | Erläuterung, wenn nötig | Angucker |
|---|---|---|
| <link rel="stylesheet" type="text/css" href="meine.css" /> | Laden einer externen CSS-Datei, die für alle Seiten der Webpräsenz gelten kann. Syntaktische Fehler lassen sich unter dem Prüflink http://jigsaw.w3.org/css-validator/check/referer feststellen. Der Aufruf muß von der zu prüfenden Seite aus erfolgen. (Beispiel hier unten auf diesen Seiten) | Eine externe Externe CSS-Datei könnte lauten: body { background-color : #eee; } h1 { font-family : verdana, helvetica, arial, sans-serif; background : url(../bilder/hg.gif) repeat; } die unter dem Namen "meine.css" neben der aufrufenden Seite liegt. Beim Aufruf sind relative oder absolute Pfadangaben erlaubt |
| @import "meine.css"; @import url("meine.css"); @import url("meine.css") print; | Der spezielle Importbefehl namens @import erlaubt es, beliebige CSS-Dateien zu laden bzw. zu seitenspezifischen Style-Angaben hinzuzuladen. Er soll immer den internen Style-Vorschriften vorausgehen, also zuerst geladen werden. Nach der url-Angabe können spezielle Medien angegeben werden, ggf. durch Komma getrennt, für die die betreffend Style-Datei gilt. Möglich sind hier: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv | <style type="text/css"> @import url(bilder/allgemein.css); </style> |
| <?XML:stylesheet type="text/css" href="meine.css"?> | Für XML, bei dem man es u.U. mit selbstgemachten Tags zu tun hat, lautet der Aufruf etwas anders. | Siehe oben! |
