HTML and CSS Reference
In-Depth Information
2.3.2 Styling mit einer CSS-Datei
Nachdem Sie das Prinzip inzwischen mehrfach im Kopf wiederholt haben und es mitt-
lerweile hoffentlich schon an Ihrem Kühlschrank hängt, heißt es nun, die Trennung
von Design und Inhalt selbst anzuwenden.
2
Erinnern Sie sich noch an »Sharky«, die WebApp des Aquariums Baumbach? Das
Aquarium ist Ihr erster richtiger Kunde, und Sie werden nun Schritt für Schritt die
WebApp bauen. Als Allererstes legen Sie die grobe Struktur fest und definieren ein
paar einfache CSS-Befehle. Sharky, der frisch geschlüpfte Jaguarhai, soll die Besucher
auf der Startseite mit zwei Überschriften und etwas Text begrüßen:
<!DOCTYPE html>
<title>Sharky</title>
<html>
<head>
</head>
<body>
<h1>Herzlich Willkommen!</h1>
<p>Mein Name ist Sharky und ich erschrecke leidenschaftlich gerne
Menschen. Schauen Sie sich doch einfach mal in meinem Zuhause,
dem <a href="http://www.html5rockt.de/">Aquarium</a> um.</p>
<h1 class="sharky">Sharky, der Jaguarhai</h1>
<p>Sharky's Eltern waren auch schon richtige Draufgänger und große Fans des
Films "Der weiße Hai".</p>
</body>
</html>
Listing 2.2
Sharky's Willkommensgruß in Form einer einfachen HTML-Seite
Sie haben nun zwei Möglichkeiten, Sharky's Willkommensgruß mithilfe von CSS zu
gestalten. Erste Möglichkeit: Sie schreiben die Definitionen direkt in den
head
-
Bereich dieser HTML-Datei. Dies ist ohne Probleme möglich. Spätestens jetzt sollten
aber bei Ihnen alle Alarmglocken klingeln. Sie erinnern sich? Trennung von Design
und Inhalt. Definitionen direkt in HTML-Dateien zu schreiben, ist kein guter Weg, da
Sie bei Änderungen an der Gestaltung alle Seiten eines Projekts editieren müssen.
Das wird schnell nervig. Eine HTML-Datei beinhaltet Informationen zu Inhalt und
Struktur, aber keine visuellen Definitionen.
Der bessere Weg ist es, die Definitionen in eine externe CSS-Datei auszulagern und
diese in der HTML-Datei zu verknüpfen. Dies funktioniert ebenfalls im
head
-Bereich
mit folgendem
link
-Tag:
Search WWH ::
Custom Search