HTML-Einfuehrung fuer Schueler - Seiten gestalten mit Style und Class

Start

Basics

Struktur

Text

Links

Bilder

Tabellen

Style

CSS-Layout

Tag-Ref

Formate erzwingen mit CLASS und STYLE
(Für Fortgeschrittene)

Seien wir ehrlich: Unsere Seite schaut noch etwas anfängerhaft aus!
Darum sollten wir darangehen, das Layout professioneller und ansehnlicher zu machen. Mit dateiweit einheitlichen Stilvorgaben (styles) geht das recht schnell und effektiv:

Nahezu allen modernen Browser können mit Hilfe von Style oder Stylesheets definierten Text darstellen.
Für den Autoren eines HTML-Dokuments bedeutet das eine tolle Möglichkeit, die Seiten attraktiver zu machen und dabei noch eine Menge Quelltext einzusparen.

Der <style>-tag

Style in den Quelltext direkt einzufügen ist kein Problem. Man sucht sich einfach einen zu formatierenden Tag aus, wir nehmen hier den Absatz:

Text

Die Syntax innerhalb des Style-tag folgt anderen Regeln als HTML. Man trennt die Anweisung und den Wert mittels Doppelpunkt, mehrere Anweisungen mit Semikolon (Strichpunkt).

Nun gibt es eine Vielzahl von Möglichkeiten, den Text zu formatieren. Einige schauen wir uns gemeinsam an:

Ich möchte meinen Textabschnitt in der Schriftart (font-family) Verdana in der Schriftgröße (font-size) 12 Punkt und mit einem Zeilenabstand (line-height) von 16 Punkt definieren. Der Text soll in einem schönen Blau (color) erscheinen und vor einem hellgrauen Hintergrund (background-color) stehen.

Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.

Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.

Genauso wie Absätze kann ich auch andere tags mit Style definieren, z.B: a, td, li, h1, h2, h3 etc.

Stylesheets an einer Stelle in der Datei

Nun wird schon klar, dass die Textauszeichnung mit Style auf diese Art eine recht aufwändige Sache ist. Natürlich ist es Blödsinn, wenn ich bei einer Seite mit viel Text jeden Absatz einzeln definiere.

Hier kommt das sogenannte Stylesheet ins Spiel.
Ich definiere einfach alle Tags an einer einzigen Stelle im Head der Datei und alle erscheinen dann in derselben Form. Das sieht im Code folgendermaßen aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Beispiel fuer Stylesheets Nr.1</title>
<style>

</style>
</head>
<body>
Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner <a href="#">Blindtext</a>. </body>
</html>

Diese Seite ansehen

Stylesheets in einer externen Datei (.css)

Wenn die Schriftformatierung auf mehreren Seiten gleich sein soll, kann man dieses Stylesheet auch einmal in einer eigenen kleinen Datei (nennen wir sie style.css) ablegen und die Dokumente dann darauf zugreifen lassen.

Dazu brauche ich ein leeres Dokument im .txt-Format (ASCII-Text), das man z.B. mit dem Editor Notepad von MS erzeugen kann.
In dieses Dokument schreibe ich ohne jede Einleitung die Style-Definitionen hinein.

p { font-family:Verdana; font-size:12pt; font-weight:normal; line-height:16pt; color:#006699; background-color:#f5f5f5; }
a:link {color:#aa000; text-decoration:none;}

Wenn ich alle meine Styles eingefügt habe, speichere ich die Datei mit "Speichern unter" ab, achte aber darauf, dass die Dateiendung nicht style.txt heißt, sondern style.css

Hier ist eine ausführliche CSS-Datei im Textformat. Damit sie funktioniert, muss die Endung in .css umgeformt werden: CSS-Beispieldatei (style_css.txt)

Jetzt kopiere ich die Datei in dasselbe Verzeichnis, in dem auch die anderen Dokumente liegen.

Nun muss ich nur noch dafür sorgen, dass die Dokumente korrekt auf diese CSS-Datei verweisen. Dazu füge ich in den Head aller Dokumente folgendes ein:

Auch wenn man eine zentrale Stylesheet-Datei verwendet, möchte man vielleicht auf einer Seite einzelne Tags ein wenig anders definieren.
Dann kann man trotz des obigen link-Befehls noch Ergänzungen in einem eigenen Style-Bereich einfügen, die dann nur auf dieser einen Seite gelten.

Erstelle mit dem Texteditor eine externe Stylesheet-Datei namens style.css und verlinke sie im Head deiner Seite! Definiere die Absätze in der Schriftart "Verdana" oder einer anderen, die weit verbreitet ist (z.B. Arial)! Experimentiere ruhig etwas herum.
Damit die Datei noch schöner wird, stellst du den gesamten Inhalt des body in eine blinde Tabelle (border="0") mit der Breite (width) von 600 Punkt und richtest sie mittig aus (vor die Tabelle <center>, hinter die Tabelle </center>)!

So kann das dann aussehen: Beispieldatei (Zwischenergebnis)

Klassen <class> allgemein

Die Zuordnung von Style-Attributen zu HTML-Tags ermöglicht es, Text eine bestimmte Formatierung zuzuweisen. Was aber, wenn man z.B. verschieden aussehende Absätze haben möchte? Z.B. einen "normalen" Absatz-Typ und einen weiteren mit kleinerem Text, etwa für die Beschriftung von Grafiken.

Mit Klassen ist das kein Problem.

Ein Beispiel: Ich möchte meinen normalen Fließtext in der Schriftart Verdana mit einer Schriftgröße von 12 Punkt und einem Zeilenabstand von 18 Punkt formatieren. Hier das Beispiel mit dem zugehörigen Stylesheet-Befehl:

Im Style-Bereich des Head oder der externen Stylesheet-Datei:
p { font-family:Verdana; font-size:12pt; font-weight:normal; line-height:18pt; }

Im Body:
Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.

Eine andere Formatierung soll der Erläuterungstext für Grafiken haben: Schriftart Verdana, 10 Punkt groß in Grau mit einem kleineren Zeilenabstand:

Im Style-Bereich des Head: oder der externen Stylesheet-Datei:
.erl { font-family:Verdana,sans serif; font-size:10pt; font-weight:normal; line-height:15pt; color:#708090; }

Im Body:
Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.

Die so definierten Klassen können z.B. auch auf Tabellenzellen (td) angewendet werden.

Einige Beispiele, nämlich die in diesem Dokument verwendeten Klassen, finden sich in der CSS-Beispieldatei (einf_css.txt) Natürlich muss die Datei, wenn Du sie als style-sheet verwenden möchtest, in "style.css" umbenannt werden.

Pseudoklassen bei Links

Links gehorchen einer etwas anderen Syntax, da man bei ihnen mit sogenannten Pseudoklassen zudem noch das Verhalten vor, während und nach dem Kontakt mit dem Mauszeiger definieren kann. Dazu die zugehörigen Style-Befehle:

a:link bezeichnet das normale Aussehen. Ist die gelinkte Seite bereits besucht worden (visited), sieht sie anders aus. Fahre ich mit dem Mauszeiger über den Link (hover), verändert er sich ebenso, wie wenn ich mit der Maus auf ihn klicke (active).

Im Style-Bereich des Head oder der externen Stylesheet-Datei:
a:link { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12pt; font-weight:normal; color:#AA0000; text-decoration:none; line-height:18pt; }
a:visited { color:#708090; }
a:active { text-decoration:underline; }
a:hover { text-decoration:underline; }

Im Body:
<a href="#" target="_blank">Ich bin ein normaler Link;/a>

Ich bin ein normaler Link.

Links mit Klassen formatieren

Auch Links kann man mit Klassen unterschiedlich definieren. Ein Beispiel: Ich möchte auch in den Erläuterungstext unter meinen Bildern Links einfügen. Da meine normalen Links auf den normalen Fließtext angepasst sind, muss ich dazu eine eigene Klasse festlegen.

Im Style-Bereich des Head oder der externen Stylesheet-Datei::
a.kl { color:blue; font-weight:normal; font-size:10pt; text-decoration:none;}
a.kl:visited { color:black; font-weight:normal;text-decoration:underline; }
a.kl:active { font-size:10pt; font-weight:normal;text-decoration:none; }
a.kl:hover { color:red ; text-decoration:underline}

Im Body:
Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner <a class="kl" href="blindtext.html" target="_blank">Blindtext</a>.

Formatiere deinen Namen mit einer Klasse (größerer Text, event. andere Schriftart oder Hintergrundfarbe)!
Danach definierst du zur Übung gleich noch Pseudoklassen für die Links auf deiner Seite. Diejenigen, die auf Anker führen, also den Inhaltsverzeichnis-Link zum Haustier oder Hobby und den "Nach oben"-Link bekommen eine eigene Klasse! Mache sie kleiner (10 Punkt) als die für die externen Links!

So kann das dann aussehen: Beispieldatei (Endergebnis)

Und hier noch eine kleine Anregung: Farbige Scroll-Leisten

Großes Lob!!

Wenn Du es bis hierher geschafft und die Übungen mitgemacht hast, hast du ein dickes Lob verdient!
Viel Spaß mit deinem neuen Wissen und frohes Experimentieren mit deiner Seite!

Wenn es dir noch nicht reicht und du echter Profi werden willst, dann schau dir die Seite über CSS-Layout an!

Zurück zur Startseite

Formate erzwingen mit CLASS und STYLE (Für Fortgeschrittene)