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.