CSS-Tutorial: Einbaumöglichkeit 2: Innerhalb von head

Neben der bereits vorgstellten Möglichkeit CSS innerhalb von Tags mit Hilfe des Attributs style einzubauen, gibt es auch die Möglichkeit dies im head-Bereich einer Webseite zu tun. Der Vorteil der head-Variante liegt dabei, dass diese Angaben für die komplette aktuelle Webseite gelten. Wenn also z.B. die Links im head-Bereich grün gefärbt werden, gilt dies für alle Links auf der Seite. Man muss also nicht jeden einzelnen Link einzeln formatieren, was einiges an Schreibarbeit und natürlich Dateigröße spart!

Der Einbau ist dabei leicht. Alle gewünschten CSS-Befehle werden innerhalb des <style>-Tags eingetragen, welches sich wiederum innerhalb des <head>-Tags befindet. Das folgende Beispiel veranschaulicht dies:

<html>
<head>
<style type="text/css">

</style>
</head>
<body>

<h1> Dieser Text wurde mit h1 formatiert!</h1>

<i> Dieser Text ist mit i formatiert worden!</i>

</body>
</html>

Innerhalb des <head>-Tags befindet sich das <style>-Tag, welches auch das Attribut type enthält, in dem dem Browser erklärt wird, welche Art von Stilvorlagen verwendet werden sollen. In unserem Fall - mit CSS - ist dies text/css.

Im <style>-Tag selbst finden wir ein Kommentar-Tag. Dieses wird von allen Browsern ignoriert, die CSS beherrschen. Ältere Browser, die CSS nicht verstehen werden die folgenden CSS-Befehle jedoch als Kommentar betrachten und somit keinen Fehler erzeugen. Die einzige Funktion des Kommentar-Tags ist also die Kompatibilität mit älteren Browsern.

Innerhalb des Kommentar-Tags finden wir auch die CSS-Formatierungen. Dabei steht an erster Stelle stets das Tag, das formatiert werden soll und dahinter dann die jeweiligen CSS-Anweisungen. Die Formatierungen, im CSS-Code, werden von geschwungenen Klammern eingeschlossen und in jeder Zeile steht normalerweise nur eine Formatierung.

Ich möchte bei meiner Webseite die Tags b, i und u alle in Arial und Schriftgröße 12px anzeigen lassen. Muss ich dafür 3 Codezeilen schreiben oder geht das auch einfacher?

Das geht tatsächlich einfacher. Schreibe einfach diesen Code: i,b,u { font-family: arial; font-size: 12px; }.
Es können nämlich mehrere Tags gleichzeitig formatiert werden, wenn diese durch Kommata voneinander getrennt werden. Eine praktische Sache!

Auf der nächsten Seiten wird eine CSS-Einbauvariante vorgestellt, die vor allem für größere Projekte unverzichtbar ist. Es ist nämlich möglich die Formatierungen von mehreren Webseiten auf einmal mit nur einer CSS-Datei zu ändern. Die entsprechende Anleitung dazu ist nur einen Klick entfernt ;)

HTML

CSS

Suchen:

Webdesign

Sonstiges

PlanetHTML

CSS-Einbaumöglichkeit 2: Innerhalb von head