4 - Eine externe CSS-Datei erstellen
- Platziere den Cursor im "head" unter dem "title"
- Öffne jeweils die Erweiterung "EB Übungen" um Html-Elemente zu platzieren
- Wähle "Extrene CSS-Datei"
- Erstelle in deinem Projekt einen neuen Ordner: "css"
- Erstelle darin eine neue Datei: "weblabor.css"
- Speichere deine Datei
Weiter, CSS-Stile für Body und Container erstellen
Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Weblabor - Start</title>
<link rel="stylesheet" href="css/weblabor.css">
</head>
<body>
<div id="container">
<header><h1>Weblabor</h1></header>
<nav class="top">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
</ul>
</nav>
<article>
<h2>Startseite</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>
<footer><p>Adresse in der Fusszeile</p></footer>
</div>
</body>
</html>