style-sheets.de hat Anfang 2004 einen kompletten Relaunch hingelegt. Viele neue und die meisten alten Inhalte sind nun im neu strukturierten CSS-Guide zu finden.
Diese Seiten enthalten daher unter Umständen veraltete Inhalte. Sie werden jedoch aus historischen Gründen und zur Vermeidung von toten Links auch bis auf weiteres online bleiben.
Wenn Sie nur ein einzelnes HTML-Tag mit Hilfe von Style Sheets formatieren wollen, können Sie die Anweisungen entweder direkt in das zu stylende Tag einfügen oder mit Hilfe des <span>-Tags, das eigens zu diesem Zweck vom W3-Konsortium eingeführt wurde und über kurz oder lang das <font>-Tag ablösen soll.
In Zeile 23 sehen Sie die Deklaration style="font-weight: bold; font-style: italic; " die den Text fett und kursiv darstellt.
<!-- Dateiname: test.html -->
<html>
<head>
<title>Grundgerüst einer HTML-Datei</title>
<meta name="author" content="Steffen Wenzel">
<link rel=stylesheet type="text/css" href="test.css">
<style type="text/css">
H1 {
color: #0000a0;
}
</style>
</head>
<body>
<h1>Überschrift</h1>
<p style="font-weight: bold; font-style: italic; ">Fließtext, nichts als Fließtext</p>
</body>
</html>
Vergessen Sie den Strichpunkt nach jeder Anweisung nicht. Wieder speichern, und als Ergebnis sehen Sie folgendes:
Wenn Sie jetzt nur einen Teil des in <p> (oder einem beliebigen anderen Tag) befindlichen Inhalts verändern wollen, können Sie mit dieser Methode wenig ausrichten. Hierfür ist das <span>-Tag zuständig, das nichts anderes macht als den Text zu unterstrichen.
<!-- Dateiname test.html -->
<html>
<head>
<title>Grundgerüst einer HTML-Datei</title>
<meta name="author" content="Steffen Wenzel">
<link rel=stylesheet type="text/css" href="test.css">
<style type="text/css">
H1 {
color: #ff0000;
}
</style>
</head>
<body>
<h1>Überschrift</h1>
<p style="font-color: #00b0b0; font-weight: bold; ">Fließtext, nichts als
<span style="text-decoration: underline;">Fließtext</span></p>
</body>
</html>
Dabei kommt dann folgendes heraus:
Das <span>-Tag hat übrigens Priorität vor dem Style-Deklarationen im HTML-Tag selbst.
Achtung: Es kann zu Problemen führen wenn Sie nicht alle vorherigen CSS-Anweisungen außer Kraft setzten. Denken Sie auch an line-height wenn Sie die Schriftgröße verändern.