1.7 Externe CSS Datei
CSS Regeln können auch in einer externen CSS-Datei notiert werden. Diese Datei kann anschließend in mehrere HTML Dokumente eingebunden werden.
Öffnen Sie das HTML Dokument und schneiden Sie die CSS Regeln aus. Kopieren Sie diese in eine neue leere Datei.
Entfernen Sie die <style> Tags! Speichern Sie die Datei unter dem Namen main.css ab.
Binden Sie die CSS Datei in das HTML Dokument ein.
Bislang stehen die CSS Regeln im Kopfbereich der HTML Datei. Diese möchten wir jetzt in einer externen CSS Datei speichern.
<head>
<style>
body {
font-family:'Armata', 'Verdana', 'Arial', 'Helvetica', sans-serif;
font-size: 1rem;
line-height: 1.2;
}
h1 {
font-size: 1.6rem;
color: #B40000;
}
p {
color: grey;
}
</style>
</head>
Dazu werden die CSS Regeln aus dem Dokument entfernt und in eine neue leere Datei kopiert.
<head>
...
Keine CSS Regeln mehr im HTML Dokument
...
</head>
Die CSS Datei speichern wir unter dem Namen main.css ab. Die Datei enthält jetzt die CSS Regeln. Ein
<style> Tag ist nicht notwendig!
body {
font-family:'Armata', 'Verdana', 'Arial', 'Helvetica', sans-serif;
font-size: 1rem;
line-height: 1.2;
}
h1 {
font-size: 1.6rem;
color: #B40000;
}
p {
color: grey;
}
Jetzt muss die CSS Datei nur noch in das HTML Dokument eingebunden werden. Dies geschieht über ein <link> Element.
<head> ... <link href="main.css" rel="stylesheet" /> ... </head>
1.7.1 Das HTML Dokument
Das Aussehen der Website ändert sich dadurch natürlich nicht!
1.7.2 Kopf- / Seiten- / Fußbereich
Erweitern Sie Ihr HTML Dokument und fügen Sie einen Kopfbereich, einen Seitenbereich und einen Fußbereich hinzu.
Dafür werden die passenden Elemente <headere>; <aside>; <footer> genutzt. Spendieren Sie
jedem Bereich eine kurze Notiz.
<head>
... unverändert ...
</head>
<header>
<p>
Kopfbereich
</p>
</header>
<main>
... unverändert ...
</main>
<aside>
<p>
Seitenbereich
</p>
</aside>
<footer>
<p>
Fußbereich
</p>
</footer>
1.7.3 Bereiche stylen
Erweitern Sie Ihr CSS und ändern Sie für den Kopfbereich, den Seitenbereich und den Fußbereich
die Hintergrundfarbe mit der background-color Eigenschaft.
body {
font-family: 'Armata', 'Verdana', 'Arial', 'Helvetica', sans-serif;
font-size: 1rem;
line-height: 1.2;
header {
background-color: black;
}
main {
background-color: grey;
}
section {
background-color: #ffffff;
}
aside {
background-color: pink;
}
footer {
background-color: black;
}
h1 {
font-size: 1.6rem;
color: #B40000;
}
p {
color: grey;
}
Lassen Sie uns einen kurzen Blick auf das Ergebnis werfen.
1.7.4 Analyse
Bei der Ausgabe handelt es sich um das gewünschte Ergebnis. Alle Elemente werden untereinander dargestellt, besitzen eine eigene Hintergrundfarbe und variieren in der Ausgabe der Schrift.
Die Abstände werden momentan noch vom Browser vorgegeben. Auffällig ist der kaum sichtbare graue
Hintergrund des <main> Elements. Dieser scheint nur zwischen den Textblöcken real
zu sein.
Untersuchen Sie das <main> Element mit den DevTools des Chromium Browsers. Machen Sie dazu einen
Rechtsklick auf die gewünschte Stelle und wählen Sie die Option Untersuchen aus. Die DevTools öffnen
sich am rechten Bildschirmrand.
Machen Sie sich mit den DevTools vertraut. Wenn Sie jetzt zum Beispiel einmal das <main>
Element innerhalb der Baumstruktur markieren, wird dies im Browser farblich hervorgehoben.
Zusätzlich erhalten Sie die Werte der CSS Eigenschaften und eine Skizze des Elements, inklusive der Abmessungen.
Um die Ausgabe und die weiteren Eigenschaften der Blockelemente nachvollziehen zu können, sollten Sie im Anschluß das Thema: CSS - Box Model durcharbeiten.
1.7.4 Strukturieren und kommentieren
Öffnen Sie die CSS Datei und strukturieren und kommentieren Sie den Code sinnvoll. Kommentare werden mit
der Zeichenfolge /* ... Kommentar ... */ notiert. Die Datei könnte jetzt folgendermaßen
aussehen.
/* -------- */
/* Bereiche */
/* ---------*/
body {
font-family: 'Armata', 'Verdana', 'Arial', 'Helvetica', sans-serif;
font-size: 1rem;
line-height: 1.2;
header {
background-color: black;
}
main {
background-color: grey;
}
section {
background-color: #ffffff;
}
aside {
background-color: pink;
}
footer {
background-color: black;
}
/* -------- */
/* Elemente */
/* ---------*/
/* Überschrift */
h1 {
font-size: 1.6rem;
color: #B40000;
}
/* Text */
p {
color: grey;
}