CSS-Styling: Verknüpfen eines externen Stylesheets mit HTML

Einführung

Willkommen zu Ihrem ersten CSS-Labor! CSS, die Abkürzung für Cascading Style Sheets, ist die Sprache, die wir verwenden, um ein HTML-Dokument zu gestalten. Sie beschreibt, wie HTML-Elemente auf dem Bildschirm, auf Papier oder in anderen Medien angezeigt werden sollen.

Es gibt drei Möglichkeiten, CSS in ein HTML-Dokument einzubinden: inline, intern und extern. Die gebräuchlichste und empfohlene Methode ist die Verwendung eines externen Stylesheets. Dieser Ansatz trennt Ihre Inhalte (HTML) von Ihrer Präsentation (CSS), wodurch Ihr Code sauberer, leichter zu warten und auf mehreren Seiten wiederverwendbar wird.

In diesem Labor lernen Sie den grundlegenden Prozess des Stylings einer Webseite mit einem externen Stylesheet. Sie werden:

Eine neue CSS-Datei erstellen.
Diese CSS-Datei mit einem vorhandenen HTML-Dokument verknüpfen.
Eine grundlegende CSS-Regel schreiben, um die Schriftart der gesamten Seite zu ändern.
Ihre Änderungen in einem Live-Webbrowser anzeigen.

Legen wir los!

Erstellen Sie eine externe CSS-Datei namens styles.css

In diesem Schritt erstellen Sie eine eigene Datei, die alle Ihre CSS-Regeln enthält. Dies wird als externes Stylesheet bezeichnet. Das Setup-Skript hat bereits eine index.html-Datei für Sie erstellt. Nun müssen Sie die CSS-Datei erstellen, die diese gestalten wird.

Verwenden Sie den Dateiexplorer im linken Bereich der WebIDE:

Klicken Sie mit der rechten Maustaste auf den leeren Bereich im Ordnerbereich project.
Wählen Sie im Kontextmenü "Neue Datei" (New File).
Ein neues Eingabefeld wird angezeigt. Geben Sie styles.css ein und drücken Sie Enter.

Sie sollten nun im Dateiexplorer eine neue, leere Datei namens styles.css sehen. Hier werden Sie in den folgenden Schritten Ihren CSS-Code schreiben.

new file

Verknüpfen Sie die CSS-Datei mit einem HTML-Dokument über das link-Tag

In diesem Schritt verbinden Sie Ihre styles.css-Datei mit Ihrer index.html-Datei. Das bloße Erstellen der CSS-Datei reicht nicht aus; Sie müssen dem HTML-Dokument explizit mitteilen, dass es diese verwenden soll. Dies geschieht mit dem <link>-Tag.

Der <link>-Tag wird innerhalb des <head>-Abschnitts Ihres HTML-Dokuments platziert. Er erfordert zwei wichtige Attribute:

rel="stylesheet": Dies teilt dem Browser mit, dass die verknüpfte Datei ein Stylesheet ist.
href="styles.css": Dies gibt den Pfad zur CSS-Datei an.

Fügen wir dies nun zu Ihrem HTML hinzu.

Öffnen Sie die Datei index.html im Dateiexplorer.
Fügen Sie innerhalb des <head>-Abschnitts die folgende Zeile hinzu:

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

Nachdem Sie die Zeile hinzugefügt haben, sollte Ihre index.html-Datei wie folgt aussehen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First CSS Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph. We will style this page with CSS.</p>
  </body>
</html>

Stellen Sie sicher, dass Sie die Datei speichern (Strg+S oder Datei > Speichern).

Fügen Sie einen grundlegenden Selektor für das body-Element hinzu

In diesem Schritt schreiben Sie Ihre erste CSS-Regel. Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock. Der Selektor verweist auf das HTML-Element, das Sie gestalten möchten. Der Deklarationsblock (innerhalb von geschweiften Klammern {}) enthält eine oder mehrere Deklarationen, die die tatsächlich anzuwendenden Stile sind.

Wir beginnen damit, das <body>-Element anzusprechen. Das Gestalten des <body> ist eine gängige Praxis, um Standardstile wie Hintergrundfarbe und Schriftart für die gesamte Seite festzulegen.

Öffnen Sie Ihre styles.css-Datei. Sie sollte noch leer sein.
Geben Sie den folgenden Code ein, um eine Regel für das body-Element zu erstellen:

body {
}

Dieser Code wählt das <body>-Element aus und bereitet einen leeren Deklarationsblock (die geschweiften Klammern) vor, in den wir im nächsten Schritt Stileigenschaften hinzufügen werden.

Setzen Sie die font-family-Eigenschaft für den body-Selektor

In diesem Schritt fügen Sie Ihrer body-Regel eine Stil-Deklaration hinzu. Eine Deklaration ist ein Eigenschaft-Wert-Paar (z. B. property: value;), das einen bestimmten Stil definiert.

Wir verwenden die font-family-Eigenschaft, um die Schriftart des Textes auf der Seite zu ändern. Indem wir sie auf den body anwenden, erben alle Textelemente innerhalb des Body (wie <h1> und <p>) diese Schriftart. Es ist eine gute Praxis, einen "Font-Stack" anzugeben – eine Liste von Schriftarten, die durch Kommas getrennt sind. Der Browser versucht die erste Schriftart, und wenn diese nicht verfügbar ist, versucht er die nächste und so weiter.

Stellen Sie sicher, dass Ihre styles.css-Datei geöffnet ist.
Fügen Sie innerhalb der geschweiften Klammern des body-Selektors die font-family-Eigenschaft hinzu.

font-family: Arial, sans-serif;

Ihre vollständige styles.css-Datei sollte nun wie folgt aussehen:

body {
  font-family: Arial, sans-serif;
}

Diese Regel weist den Browser an, allen Text innerhalb des <body> mit der Schriftart Arial darzustellen. Wenn Arial auf dem System des Benutzers nicht installiert ist, greift er auf die standardmäßige serifenlose Schriftart des Systems zurück.

Speichern Sie die Dateien und aktualisieren Sie den Browser, um die Änderungen anzuzeigen

In diesem letzten Schritt sehen Sie das Ergebnis Ihrer Arbeit. Nach dem Schreiben von Code müssen Sie Ihre Dateien speichern und dann die Änderungen im Browser anzeigen.

Stellen Sie sicher, dass sowohl index.html als auch styles.css gespeichert sind. Sie können die Tastenkombination Strg+S verwenden oder im Menü zu Datei > Speichern gehen.
Navigieren Sie zum Tab Web 8080, der sich oben in der LabEx-Oberfläche befindet. Dieser Tab zeigt die Ausgabe des Webservers an, der in Ihrer Umgebung läuft.
Möglicherweise müssen Sie den Browser-Tab aktualisieren, um die neuesten Änderungen zu sehen.

Font change in browser preview

Beobachten Sie den Text auf der Seite. Er sollte nun in der Schriftart Arial (oder einer ähnlichen serifenlosen Schriftart) angezeigt werden, was sich von der standardmäßigen Serifenschrift (wie Times New Roman) unterscheidet, die Browser normalerweise verwenden. Die Änderung mag subtil sein, bestätigt aber, dass Ihr externes Stylesheet korrekt verknüpft und angewendet wurde.

Experimentieren Sie gerne! Versuchen Sie, Arial in Ihrer styles.css-Datei in Verdana oder Georgia zu ändern, speichern Sie sie und aktualisieren Sie den Tab Web 8080, um die Schriftartänderung sofort zu sehen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Lab erfolgreich abgeschlossen und Ihren ersten Schritt in die Welt von CSS gemacht.

In diesem Lab haben Sie die grundlegendste und wichtigste Methode zum Stylen von Webseiten gelernt:

Wie man eine externe CSS-Datei (styles.css) erstellt.
Wie man die CSS-Datei mit dem <link>-Tag im <head>-Bereich mit einem HTML-Dokument verknüpft.
Wie man eine grundlegende CSS-Regel mit einem Elementselektor (body) schreibt.
Wie man einen Stil mit einer Eigenschaft und einem Wert anwendet (font-family: Arial, sans-serif;).

Diese Grundlage der Trennung von Struktur (HTML) und Präsentation (CSS) ist ein Kernprinzip der modernen Webentwicklung. Sie sind nun bereit, fortgeschrittenere CSS-Selektoren, Eigenschaften und Konzepte wie das Box-Modell, Layout und Responsive Design zu erkunden.

Einführung und Verknüpfung von CSS