Externes CSS

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 8 von 76.

Externes CSS ist eine Methode zum Hinzufügen von CSS-Styles zu einem HTML-Dokument, indem diese in einer separaten CSS-Datei platziert werden und diese Datei mit dem HTML-Dokument über das <link>-Tag verknüpft wird. Dieser Ansatz ermöglicht es Ihnen, dieselben Styles auf mehrere HTML-Seiten anzuwenden, was die Wartung und Aktualisierung des Designs Ihrer Website erleichtert. Externes CSS ist ideal für große Projekte, bei denen Konsistenz und Effizienz entscheidend sind.

So verwenden Sie externes CSS:

Erstellen Sie eine CSS-Datei (z. B. styles.css) mit Ihren CSS-Regeln:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

2. Verknüpfen Sie die CSS-Datei mit Ihrem HTML-Dokument, indem Sie ein <link>-Tag im <head>-Bereich hinzufügen:

<!DOCTYPE html>
<html>
<head>
    <title>Externes CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Willkommen auf meiner Seite</h1>
    <p>Dies ist ein Textabschnitt.</p>
</body>
</html>

In diesem Beispiel verbindet das <link>-Tag die styles.css-Datei mit dem HTML-Dokument. Das rel-Attribut gibt die Beziehung zwischen dem HTML-Dokument und der verknüpften Datei (Stylesheet) an, und das href-Attribut gibt den Pfad zur CSS-Datei an.

Aufgabe

Einfach

Dir werden HTML- und CSS-Dateien (index.html und styles.css) gegeben. Füge ein link-Tag in der HTML-Datei hinzu, um die Dateien zu verbinden und die Styles zur HTML-Datei hinzuzufügen!

Spickzettel

Externes CSS ermöglicht es Ihnen, CSS-Styles in einer separaten Datei zu platzieren und diese über das <link>-Tag mit HTML-Dokumenten zu verknüpfen.

Erstellen Sie eine CSS-Datei mit Ihren Styles:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

Verknüpfen Sie die CSS-Datei im HTML-Bereich <head>:

<link rel="stylesheet" href="styles.css">

Das Attribut rel gibt die Beziehung (stylesheet) an und href gibt den Pfad zur CSS-Datei an.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>