Cascading Style Sheets, Formatvorlagen, kurz CSS, sind mit ein bisschen Vorsicht ein phantastisches Layout-Werkzeug. Vorsicht, weil Netscape sich wehrt. Die Style Sheets, die ich hier verwende und vorstelle, funktionieren in IE, Mozilla, Opera und zum größten Teil auch mit Netscape (wenn nicht, richten sie dort wenigstens keinen Schaden an, sondern bleiben dann einfach "unsichtbar"). CSS bewirken viele schöne Dinge wie gepunktete Unterstreichungen und Ränder, bunte Scrollbalken, fest positionierte Hintergründe uvm., die mit HTML nicht zu realisieren sind. Text kann mit Cascading Style Sheets effektiv formatiert werden und die Attribute müssen nicht immer wieder im Font-Tag definiert werden, man erstellt einfach eine ausgelagerte CSS-Datei mit Formatvorlagen. Das heisst, dass Änderungen am Textformat nur noch zentral in dieser einen Datei vorgenommen werden müssen und sich von hier aus auf alle Dokumente auswirken. Eine großartige Arbeitserleichterung vor allem bei aufwendigen Projekten! Es folgen einige - ausschließlich textrelevante - CSS-Beispiele mit Erklärung und .:: Links ::. zu anderen Seiten, die sich intensiver mit diesem so viele Möglichkeiten bietendem Thema auseinandersetzen.

beispiel.css : Linkgestaltung

A:link { text-decoration: none; color: #cc33cc; }
A:visited { text-decoration: none; color: #006699; }
A:hover { text-decoration: underline; color: #cc33cc; }
A:active { text-decoration: none; color: #006699; }

Erklärung:

CSS-Anweisungen für das Erscheinungsbild der Links, sie sollten in keinem Dokument fehlen.

A:link - Link
A:visited - besuchter Link
A:hover - Link bei mouseover, nicht in Netscape
A:active - Link bei mouseclick

Dahinter stehen die zugewiesenen Attribute:

text-decoration: none - Die Unterstreichung der Links wird unterdrückt.
text-decoration: underline - Der Link wird unterstrichen.

beispiel.css : Textformatierung

.headline {
font-family: Verdana, Helvetica, Arial;
font-weight: bold;
font-size: 14px;
line-height: 26px;
color: #ff0033;
background-color: #ff99ff;
letter-spacing: 3px;
}
.subline {
font-family: Verdana, Helvetica, Arial;
font-weight: bold;
font-size: 12px;
line-height: 22px;
color: #666633;
letter-spacing: 1px;
border-bottom: dotted 1px #ff0033;
}
.fliesstext {
font-family: Verdana, Helvetica, Arial;
font-size: 11px;
}
.klein {
font-family: Verdana, Helvetica, Arial;
font-size: 10px;
}

So sieht's aus:

Headline
Subline
Fließtext
klein

Erklärung:

Definierte Textklassen (.headline) mit zugewiesenen Attributen. Jedem Attribut muss ein Semikolon folgen, die { Attribute einer Klasse } werden immer mit geschwungenen Klammern zusammengefasst.

Ursache und Wirkung:

Alle Formatierungen können für Links ebenso verwendet werden wie für Fließtext.

font-family: - Schriftart
font-size: - Die Schriftgröße kann wahlweise in pt, px oder em angegeben werden. Mindestens 9pt, 11 px oder 0.7em, sonst ist die Schrift auf dem Mac mit Netscape nicht mehr zu entziffern.
line-height: - Der .:: Zeilenabstand ()::.. Diesen kann man nur mit CSS regulieren, mit reinem HTML ist da wirklich nichts zu machen. Und er ist so wichtig, um Text optisch ansprechender und auch besser lesbar zu gestalten!
letter-spacing: - Beeinflusst die .:: Laufweite ()::., in Netscape nicht sichtbar.
background-color: - Verpasst in diesem Fall der Schrift einen farbigen Hintergrund. .
border-bottom: - Unterstreicht mit einer gepunkteten (Mozilla) oder gestrichelten (IE) Linie.

CSS in HTML einbinden

1. Ausgelagerte CSS-Datei

Die Cascading Style Sheets werden als separate Datei (name.css) gespeichert und mit dieser Zeile in den Headbereich der HTML-Datei eingebunden:
<link rel="stylesheet" type="text/css" href="screenario.css">

Die Links nehmen die Style Sheets von alleine an, die Textbereiche, die ein in den Style Sheets definiertes Format erhalten sollen, werden in den entsprechenden Tag gesetzt, Bsp.:
<span class="headline">Headline</span>

2. CSS im Headbereich der HTML-Datei positionieren

Macht Sinn, wenn die CSS-Anweisungen oder Teile dieser nur für dieses eine Dokument wirksam werden sollen:

<head>
<style type="text/css">
A:link { text-decoration: none; color: #cc33cc;
}
A:visited { background: #cccc99; text-decoration: none; color: #006699;
}
A:hover { background: #cccc99; text-decoration: none; color: #cc33cc;
}
</style>
</head>

3. CSS lokal im Tag

Macht Sinn, wenn die CSS-Anweisungen wirlich nur an dieser Stelle benutzt werden:

<span style="font-family: Verdana,Arial,Helvetica; font-size: 9pt; color: #cccc99;">text</span>

Besser beachten!

Netscape hasst den Zeilenabstand. Schiebt einfach Grafiken in den Text oder Buttons in Textareas, wenn man eines nicht beachtet: Immer, immer, müssen die die CSS-Anweisungen enthaltenden Tags wieder geschlossen werden, bevor eine Grafik oder ein Eingabefeld positioniert wird.

Zum Thema vertiefen folgende Links, denn hier wurde nur ganz leicht an der Oberfläche von CSS gekratzt, sie sind unerschöpflich:

.:: CSS-Design » ::.
.:: CSS-Technik » ::.
.:: Self-HTML : CSS » ::.
.:: Webdesign ohne Barrieren » ::.