Das Verbinden einer CSS-Datei mit HTML ist ein wichtiger Schritt beim Erstellen moderner Webseiten. Mit Stilen können Sie das Erscheinungsbild und die Anordnung der Seitenelemente verbessern und sie informativer und benutzerfreundlicher gestalten.
Es stellt sich heraus, dass das Verbinden einer CSS-Datei mit HTML ziemlich einfach ist, wenn Sie ein paar Regeln und konsequente Aktionen kennen. In diesem Artikel erfahren Sie, wie Sie CSS- und HTML-Dateien Schritt für Schritt in einen Ordner einbinden, damit Sie diese Technik problemlos auf Ihr Webprojekt anwenden können.
Der erste Schritt besteht darin, zwei Dateien im selben Ordner zu erstellen - eine HTML-Datei und eine CSS-Datei. Es ist jedoch wichtig, die korrekte Struktur und Benennung der Dateien für eine einfachere Bedienung beizubehalten. Die HTML-Datei enthält den Code der Webseite und die CSS-Datei ist der Stilcode.
Dateien vorbereiten
Bevor Sie mit HTML- und CSS-Dateien arbeiten können, müssen Sie einen separaten Ordner erstellen, in dem alle erforderlichen Dateien gespeichert werden. Dies wird die Struktur des Projekts organisieren und die Unterstützung vereinfachen.
1. Erstellen Sie einen neuen Ordner auf Ihrem Computer. Klicken Sie dazu mit der rechten Maustaste auf das gewünschte Verzeichnis und wählen Sie "Neu" -> "Ordner".
2. Benennen Sie den Ordner mit dem entsprechenden Namen, der ihn Ihrem Projekt zuordnen würde. Zum Beispiel "my_project".
3. Erstellen Sie im Ordner "my_project" zwei neue Textdateien mit Erweiterungen. "html" und ".css".
4. Benennen Sie die Dateien entsprechend ihrem Ziel. Zum Beispiel "index.html" für die Projekthauptseite und "styles.css" für eine Stildatei.
Jetzt können Sie mit dem Einrichten und Verbinden von HTML- und CSS-Dateien fortfahren.
Ordner und Dateien erstellen
Schritt 1: Suchen Sie nach dem Speicherort auf Ihrem Computer, an dem Sie einen neuen Ordner erstellen möchten. Dies kann normalerweise der Desktop oder der Ordner "Dokumente" sein.
Schritt 2: Klicken Sie mit der rechten Maustaste auf den ausgewählten Speicherort und wählen Sie "Neuen Ordner erstellen" aus dem Kontextmenü.
Schritt 3: Geben Sie einen Namen für den neuen Ordner ein. Nennen Sie es zum Beispiel "Meine Webseite".
Schritt 4: Drücken Sie die Eingabetaste oder klicken Sie außerhalb des Eingabefelds für den Ordnernamen, um einen Ordner zu erstellen.
Nun, da Sie einen Ordner haben, besteht der nächste Schritt darin, HTML- und CSS-Dateien zu erstellen:
Schritt 1: Öffnen Sie den erstellten Ordner.
Schritt 2: Klicken Sie mit der rechten Maustaste in den Ordner und wählen Sie im Kontextmenü die Option Textdokument erstellen aus.
Schritt 3: Doppelklicken Sie auf ein neues Textdokument, und nehmen Sie die erforderlichen Änderungen vor. Speichern Sie es mit der Erweiterung. "html", um eine HTML-Datei zu erstellen.
Schritt 4: Wiederholen Sie die Schritte 2 und 3, um ein weiteres Textdokument zu erstellen, speichern Sie es jedoch mit der Erweiterung. "css", um eine CSS-Datei zu erstellen.
Jetzt haben Sie einen Ordner mit zwei Dateien darin: HTML und CSS. Sie sind fast bereit, diese Dateien miteinander zu verbinden!
Platzieren von Dateien in einem Ordner
Um HTML- und CSS-Dateien mit Ihrer Webseite zu verbinden, müssen Sie eine spezielle Ordnerstruktur erstellen.
Erstellen Sie zunächst einen Hauptordner für Ihr Projekt. Erstellen Sie in diesem Ordner zwei Unterordner – einen für HTML-Dateien und einen zweiten für CSS-Dateien.
Erstellen Sie im Ordner mit den HTML-Dateien eine neue Datei und speichern Sie sie mit der Erweiterung .html. Für diese Anweisung nennen wir es index.html. In dieser Datei schreiben Sie den gesamten HTML-Code für Ihre Webseite.
Der nächste Schritt ist, eine CSS-Datei zu erstellen. Erstellen Sie im Ordner mit den CSS-Dateien eine neue Datei und speichern Sie sie mit der Erweiterung .css. Für diese Anleitung nennen wir es style.css. In dieser Datei schreiben Sie den gesamten CSS-Code, um Ihre Webseite zu stylen.
Jetzt haben Sie zwei Dateien – index.html und style.css - Sie können mit der Arbeit an Ihrer Webseite beginnen.
Um eine CSS-Datei in einer HTML-Datei zu verknüpfen, müssen Sie das Link-Tag mit dem href-Attribut verwenden und den Pfad zu Ihrer CSS-Datei angeben. Zum Beispiel:
Hier "./css/style.css" ist der Pfad zur Style-Datei.css relativ zum Ordner mit HTML-Dateien. Wenn sich Ihre CSS-Datei in einem anderen Ordner befindet, müssen Sie den richtigen Pfad angeben.
Jetzt ist der gesamte CSS-Code aus der Style-Datei.das CSS wird auf alle Elemente auf Ihrer Webseite angewendet.
Verbinden von CSS mit HTML
Führen Sie die folgenden Schritte aus, um CSS mit einer HTML-Datei zu verbinden:
- Erstellen Sie eine CSS-Stylesheet-Datei mit der Erweiterung .css und speichern Sie es im selben Ordner, in dem sich die HTML-Datei befindet.
- Öffnen Sie die HTML-Datei in einem Texteditor.
- Fügen Sie im HTML-Abschnitt der Datei das folgende Tag hinzu:
- rel="stylesheet" ist ein Attribut, das den Typ der zu verbindenden Datei angibt, in diesem Fall ist es eine Stylesheet-Datei.
- type="text/css" ist ein Attribut, das den Inhaltstyp der Datei angibt, in diesem Fall ist es CSS.
- href="styles.css" ist ein Attribut, das den Pfad zur Stildatei angibt. Hier müssen Sie den Namen Ihrer CSS-Datei angeben.
- Speichern Sie die Änderungen in der HTML-Datei.
Jetzt wird die HTML-Datei die CSS-Datei verbinden und ihre Stile auf ihre Elemente anwenden.
