Grundsätzlich
Zum Auslagern werden 2 Dinge benötigt. Als erstes eine neue Datei, ich nenne diese design.css (kann aber auch beliebig anders heißen) und als zweites einen Verweis darauf in der HTML-Datei, die diese ausgelagerte Datei nutzen soll.
Bevor wir beginnen erstelle ein neues Arbeitsverzeichnis: /ai/css/2_auslagern
Jetzt erstelle in diesem Verzeichnis die Datei anfang1.html
Kopiere den folgenden Code.
Beachte den head-Bereich, hier wird der Verweis angegeben, der die css-Datei einbindet. Diese css-Datei wird weiter unten erstellt. DAS /ai/ vor design.css weglassen
<html>
<head>
<link href="design.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>jetzt HTML lernen mit CSS</h1>
</body>
</html>
So, abspeichern nicht vergessen und jetzt erstellen wir im gleichen Verzeichnis eine neue Datei mit dem Namen „design.css“.
Der Inhalt lautet:
h1 { color:red;
letter-spacing:30px; }
Unbedingt auf Leerzeichen achten, und als Klammern kommen hier die geschweiften zum Zuge!! Datei abspeichern!
Aufpassen, dass es nicht eine design.css.txt wird. Also vorher bei – Datei – speichern unter auf „Alle Dateien“ stellen.
Nun die html-Datei anfang1.html aufrufen. Sollte deine h1 nun g r o ß und r o t sein, hast du alles richtig gemacht. Wenn nicht, dann … finde den Fehler.
Schreibe einen Kommentar