3.3.2 Separates Stylesheet (external stylesheet)
Bestandteile
Zum Auslagern spielen 3 Teile eine Rolle:
-
Als erstes ist eine neue Datei für das Stylesheet mit der Endung "css"
zu erstellen.
-
als zweites ist eine Verweis im Kopf der HTML-Datei aufzunehmen,
die auf das separate Stylesheet verweist.
-
und als drittes wird dann der entsprechende HTML-Texte nach der Vorgabe im
Stylesheet formatiert.
Vorgehen
a) Erstens: Separate CSS-Datei erstellen
Neue Datei mit der Endung ".css" erstellen.
Für den Dateinamen sind nur Kleinbuchstaben zu verwenden.
-
Auf dem Desktop mit der rechten Maustaste den Editor aufrufen und ein neues
Dokument eröffnen.
-
das Dokument mit der Endung ".css" speichern.
Beispiel von einem Inhalt des Stylesheets:
h6 {font-size:1em;font-weight:bold; letter-spacing:0.05em;
background:transparent;color:fuchsia;}
b) Zweitens: Verweis im Kopf der HTML-Dokumentes auf das separate Stylesheet
Im Kopf des HTML-Dokumentes ist ein Verweis auf das separate Stylesheet:
<link rel="stylesheet" type="text/css" href="dateiname.css">
c) Drittens: Das HTML-Dokument wird wie folgt editiert
1) Im Quelltext steht geschrieben:
<h6>Dies ist ein Beispiel formatiert als Überschrift 6. Ordnung</h6>
2) Im HTML-Dokument erscheint dann folgendes:
Dies ist ein Beispiel formatiert als Überschrift 6. Ordnung
Grundlagen und Workshops
↑