Einfache Einbindung von CSS in die HTML-Datei
Ein häufig auftretender Fehler bei den ersten Schritten mit der eigenen Webseite ist die falsche Einbindung von CSS-Dateien. Das Konzept mit relativen Pfaden zu arbeiten ist gerade für viele Windows-Nutzer noch sehr neu und kompliziert und daher sieht die Seite dann oft anders aus als erwartet.
Nun gibt es zwei Möglichkeiten, dieses Problem zu beheben:
CSS-Datei im selben Verzeichnis wie die HTML Datei
Es ist nicht zwingend erforderlich eine CSS-Datei in einem anderen Ordner aufzubewahren auch wenn es irgendwann sehr unübersichtlich werden könnte, wenn alle Dateien in einem Ordner sind. Nehmen wir einmal an, die CSS-Datei trägt den Namen style.css, dann würden Sie die Datei, wenn Sie im selben Ordner wie die HTML-Datei liegt, mit folgendem Code einbinden:
<link rel="stylesheet" href="style.css" type="text/css" />
Der Vorteil hier ist auch, dass Sie so die Grafiken in der CSS-Datei einfacher einbinden können. Wenn Sie Ihre ersten Schritte mit HTML und CSS machen legen Sie ruhig erstmal alle Dateien in den gleichen Ordner, bringen Sie Ihre Seite “zum Laufen” und schaffen Sie dann Ordnung indem Sie Ordner für die Bilder und die CSS-Datei anlegen.
CSS direkt im HTML einfügen
Wenn es mit der Verknüpfung von HTML und CSS einfach nicht klappen will, dann können Sie auch den Inhalt der CSS-Datei erstmal in Ihr HTML-Dokument einfügen. Der Code, den Sie dann im head-Bereich Ihrer Seite einbinden, sieht ungefähr so aus:
<style type="text/css">// Hier dann CSS einfügen</style>
Ganz wichtig ist: Nicht wegen kleinen Fehler aufgeben sondern weiter an der eigenen Seite schrauben. Sehen Sie die beiden Varianten als leichteren Einstieg in die Arbeit mit CSS und HTML. Wenn Ihre Seite so aussieht, wie Sie es sich vorstellen, können Sie die Einbindung immer noch optimieren.
