Externes CSS

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

Externes CSS ist eine Methode, CSS-Stile zu einem HTML-Dokument hinzuzufügen, indem sie in einer separaten CSS-Datei platziert und diese Datei mithilfe des Tags <link> mit dem HTML-Dokument verknüpft wird. Dieser Ansatz ermöglicht es dir, dieselben Stile auf mehrere HTML-Seiten anzuwenden, wodurch die Pflege und Aktualisierung des Designs deiner Website erleichtert wird. Externes CSS eignet sich 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 Datei styles.css mit dem HTML-Dokument. Das Attribut rel gibt die Beziehung zwischen dem HTML-Dokument und der verknüpften Datei (Stylesheet) an, und das Attribut href gibt den Pfad zur CSS-Datei an.

Aufgabe

Einfach

Du erhältst HTML- und CSS-Dateien (index.html und styles.css). Füge der HTML-Datei ein link-Tag hinzu, um die Dateien zu verbinden, und füge die Styles zur HTML-Datei hinzu!

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>