Externe Stylesheets

Externe Stylesheets trennen das Design einer Webseite vom HTML-Code. Dabei speicherst du CSS in einer separaten Datei und verknüpfst es mit deiner HTML-Datei. Dadurch bleibt dein Code übersichtlicher und einfacher zu warten.

HTML-Datei

index.html

1<!DOCTYPE html>
2<html lang="de">
3<head>
4    <meta charset="UTF-8">
5    <title>Externes CSS</title>
6
7    <!-- Externes Stylesheet einbinden -->
8    <link rel="stylesheet" href="style.css">
9</head>
10<body>
11
12    <h1>Meine erste Webseite</h1>
13
14    <p>
15        Dieses Layout wird mit einem externen Stylesheet gestaltet.
16    </p>
17
18</body>
19</html>

CSS-Datei

style.css

1body {
2    background-color: #f0f0f0;
3    font-family: Verdana, sans-serif;
4    margin: 20px;
5}
6
7h1 {
8    color: darkred;
9}
10
11p {
12    color: #333333;
13    font-size: 18px;
14}

Erklärung

<link rel="stylesheet" href="style.css"> bindet deine externe CSS-Datei namens style.css in die HTML-Seite ein.
Die Datei style.css enthält alle CSS-Regeln für das Design.
Änderungen am Layout nimmst du nur in der CSS-Datei vor.
Mehrere HTML-Dateien kannst du mit derselben CSS-Datei verknüpfen.

Im nächsten Kapitel lernst du: Grundliegende Syntax (eigenschaften und Werte)