Zentrale Style-Angaben einbinden

Eine Homepage besteht ja meist aus mehreren Seiten. Kopiert deshalb mal die "index.html" und benennt die Kopie um in "seite1.html".

Nun verlinken wir beide Seiten, wie das im Rahmen einer Navigation üblich ist.

Auf der Index-Seite fügen wir nach der Überschrift folgenden Link ein:

<a href="seite1.html">CSS Teil 1</a>

Auf der "seite1.html" ändern wir nun noch Title und Überschrift und verlinken zur index.html. Der Quelltext der "seite1.html" sollte dann so aussehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS Teil 1</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type ="text/css">
body
{
background-color: #EBECE4;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0
}
h1
{
color: #000080;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Teil 1</h1>
<a href="index.html">Startseite</a>
</body>
</html>

Beide Seiten sind nun verlinkt.
Zwar sehen die Links noch nicht besonders schön aus, aber das heben wir uns für ein späteres Kapitel auf.

Auf die Gefahr hin, dass ich jetzt nerve: Ich hab's mir mittlerweile anders überlegt.
Der hellgraue Hintergrund gefällt mir nicht mehr und ich möchte ihn durch eine freundlichere Farbe ersetzen (bitte macht es bei euch genauso, denn wie ihr später merken werdet, kommt es mir eigentlich gar nicht auf die Farbe an, ich möchte damit nur etwas anderes demonstrieren).
Wie das geht, solltet ihr ja mittlerweile wissen: Einfach den Farbcode der background-color vom body ändern.

Wir öffnen also die "index.html" mit dem Editor und weisen der background-color einen anderen Farbwert zu, z.B. diesen:

background-color: #FCF6CF;

Abspeichern, ansehen und nochmals die Links betätigen.

Hoppla:
Auf der ersten Seite hat die Farbänderung durchgeschlagen, auf der zweiten nicht. Logisch, da haben wir den Farbwert ja auch nicht verändert. Also: Das Ganze noch mal mit "seite1.html" und schon haben wir wieder ein einheitliches Layout.

Jetzt stellt euch mal vor, eure Homepage umfasst zehn oder noch mehr Seiten (was ja nicht ungewöhnlich ist) und ihr wollt überall die Hintergrundfarbe Schriftart, Schriftfarbe oder sonst was ändern. Seite eins aufrufen, ändern, abspeichern. Seite zwei aufrufen, ändern, abspeichern. Seite drei aufrufen, ändern, abspeichern. Und so weiter und so fort. Ganz schön aufwändig und umständlich - gut erkannt! Aber bisher musstet ihr das ohne CSS ja ebenfalls so machen.

Da jedoch der Mensch von Natur aus faul ist, geht's auch einfacher.
Bisher hatten wir die Style-Angaben in den Head-Bereich jeder Seite eingebunden. Deshalb mussten wir sie auch auf jeder Seite ändern.
Um uns künftig diese Mühe zu sparen, verwenden wir nun eine einheitliche CSS-Datei, die für sämtliche Seiten gelten soll.

Öffnet zu diesem Zweck eine neue Datei mit eurem Editor.
Schneidet aus der "index.html" eure bisherigen Style-Angaben aus und fügt sie in die neue Datei ein (bitte ausschneiden und nicht kopieren!).
Diese hat dann folgenden Inhalt:

body
{
background-color: #FCF6CF;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

h1
{
color: #000080;
text-align: center;
text-decoration: underline;
}

Wichtig:
Bitte nicht die style-Tags in die CSS-Datei einfügen, die werden hier nicht benötigt und führen an dieser Stelle lediglich zu Problemen.

Diese Datei speichern wir nun unter "style.css" ab. Ihr könnt auch eine andere Bezeichnung wählen, müsst das dann aber bei der nachfolgenden Referenzierung entsprechend berücksichtigen.

Ebenso die nun wieder abgespeckte "index.html" abspeichern und im Browser wieder ansehen. Sieht alles wieder so "nüchtern" aus wie zu Beginn des Kurses.
Damit die neu angelegte "style.css" ihre Wirkung entfalten kann, müssen wir nun eine Verbindung zwischen ihr und den html-Dateien herstellen.

Zu diesem Zweck löschen wir noch die stehen gebliebenen style-Tags und ersetzen sie damit:

<link rel="stylesheet" type="text/css" href="style.css">

Eure index.html sollte jetzt so aussehen und sollte ebenfalls wieder etwas Farbe haben:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine erste CSS-Seite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Meine erste CSS Seite</h1>
<a href="seite1.html">CSS Teil 1</a>
</body>
</html>

Die zweite Seite sieht farblich noch unverändert aus, denn dort haben wir ja bisher noch nichts am Quelltext geändert.
Löscht also ebenfalls die Style-Angaben auf der "seite1.html" und ersetzt sie wie oben durch den Verweis auf die "style.css".
Abspeichern und ansehen. Jetzt sollte auch unsere zweite Seite farblich exakt der ersten entsprechen.

Wollt ihr künftig mal wieder die Hintergrundfarbe (oder was auch immer) ändern, dann nehmt ihr diese Änderung nur einmal in der "style.css" vor.
Vorausgesetzt, ihr habt diesen Verweis
<link rel="stylesheet" type="text/css" href="style.css">
im Head-Bereich sämtlicher Seiten stehen, schlagen die Änderungen in der "style.css" nun automatisch auf alle Seiten durch.

Probiert's mal aus, indem ihr nochmal die Hintergrund- oder Schriftfarbe ändert (abspeichern nicht vergessen).
Auf diese Weise habt ihr jetzt das Grundprinzip von CSS mit seinen Vorteilen erkannt:

Man kann damit den HTML-Code erheblich abspecken, wodurch er übersichtlicher wird.
Es findet eine strikte Trennung zwischen Inhalt und Layout statt.
Änderungen von Style-Angaben brauchen nur noch über die "style.css" erfolgen, ohne dass man jede Seite einzeln anpassen muss.

Wir haben jetzt gesehen, dass man Style-Angaben sowohl im Head-Bereich, als auch in einer ausgelagerten CSS-Datei hinterlegen kann, wobei letztere Möglichkeit die weitaus elegantere und vorteilhaftere ist.
Eine zentral hinterlegte CSS-Datei erspart uns die Wiederholung von Formatierungscode auf jeder Seite. Eine Arbeit, die ihr bisher ohne CSS auf jeder Einzelseite durchführen musstet.
Unsere einzelnen Dateigrößen werden kleiner, was schnellere Ladezeiten (die CSS-Angaben werden nur einmal geladen und bleiben im Cache), geringeren Webspace und weniger Traffic zur Folge hat.

Vielleicht habt ihr vereinzelt in manchen Quelltexten auch schon folgendes gesehen:

<body style="background-color: #FCF6CF; font-family: Verdana, Arial, sans-serif;">

In diesem Fall werden die Style-Angaben direkt beim Aufruf des jeweiligen Elements im HTML-Quelltext definiert.
Auch das ist eine Möglichkeit und kann im Einzelfall durchaus mal angewandt werden. Aber unser Ziel ist ja ein knackig kurzer und übersichtlicher Quelltext. Deshalb werden wir soweit möglich das Instrument einer ausgelagerten CSS-Datei nutzen.

Fassen wir die wesentlichen Vorteile einer ausgelagerten CSS-Datei noch einmal zusammen:

Der nächste Teil beschäftigt sich mit Div's, Container und Boxen.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: