CSS mit HTML verknüpfen: link, style, @import und Pfade reparieren
Binde ein Stylesheet mit dem link-Element ein oder nutze style, Inline-Styles oder @import. Teste relative und absolute Pfade live und arbeite die Checkliste ab, wenn CSS nicht lädt.
CSS mit HTML verknüpfen
Um eine CSS-Datei mit einer HTML-Seite zu verknüpfen, setze <link rel="stylesheet" href="styles.css"> in den head. Das href ist ein Pfad von der HTML-Datei zur CSS-Datei, eine Datei in einem css-Ordner braucht also href="css/styles.css". Du kannst CSS auch in ein style-Element oder ein style-Attribut schreiben oder Dateien mit @import einbinden.
Vier Wege, CSS zu einer Seite hinzuzufügen
Methode
Wohin es kommt
Am besten für
<link rel="stylesheet">
In den head
Fast alles: eine Datei, die viele Seiten teilen
<style> element
In den head
Kleine Seiten, Critical CSS, Demos
style="..." attribute
An ein einzelnes Element
Einzelne Werte, die aus Code gesetzt werden
@import url(...)
Am Anfang einer CSS-Datei
CSS in Layer oder Dateien aufteilen
Fast jeder Fall einer Seite ohne Styling lässt sich auf den Pfad oder die Attribute des link-Elements zurückführen. Dieser Leitfaden zeigt jede Art, CSS hinzuzufügen, enthält einen Pfadprüfer, der genau ermittelt, auf welche URL dein href zeigt, und endet mit einer Checkliste für den Fall, dass die Styles immer noch nicht erscheinen.
Gib die Adresse deiner HTML-Seite ein, so wie sie in der Adressleiste des Browsers steht.
Gib das href ein, das du im link-Element verwendet hast.
Der Prüfer zeigt die vollständige URL, die der Browser anfordern wird, berechnet in deinem Browser nach den Standardregeln für URLs.
Öffne diese URL in einem neuen Tab. Wenn dort nicht dein CSS erscheint, ist der Pfad falsch.
Das Attribut type="text/css" ist optional. CSS ist die einzige Stylesheet-Sprache, die Browser verwenden.
Setze Stylesheet-Links in den head. Links im body sind erlaubt, können aber kurz ungestylte Inhalte verursachen.
Ergänze ein media-Attribut wie media="print", damit ein Stylesheet nur gilt, wenn diese Bedingung zutrifft.
Die Reihenfolge zählt. Bei gleicher Spezifität gewinnt die später geladene Regel, binde dein eigenes CSS also nach einem Framework ein.
Häufige Fragen
Warum wird meine CSS-Datei nicht mit meinem HTML verknüpft?
Prüfe zuerst den Pfad: Öffne die Entwicklertools des Browsers, sieh in den Network-Tab und such die CSS-Anfrage. Ein 404 bedeutet, dass das href an die falsche Stelle zeigt. Prüfe außerdem, ob rel="stylesheet" richtig geschrieben ist, ob die Dateinamen dieselbe Groß- und Kleinschreibung haben und ob du die Datei gespeichert hast.
Was ist der Unterschied zwischen einem relativen und einem absoluten Pfad?
Ein relativer Pfad wie css/site.css wird vom Ordner der aktuellen Seite aus aufgelöst. Ein Pfad, der mit / beginnt, wird vom Stammverzeichnis der Website aus aufgelöst, und eine vollständige URL mit https:// zeigt auf eine exakte Adresse. Pfade ab dem Stammverzeichnis funktionieren nicht, wenn du die Datei direkt von der Festplatte öffnest.
Soll ich @import oder link verwenden?
Nimm lieber link. Jedes @import wird erst entdeckt, nachdem die Datei, die es enthält, heruntergeladen ist, verkettete Imports laden also nacheinander. @import ist nützlich für die Reihenfolge mit layer() oder in einem Build-Tool, das die Dateien ohnehin bündelt.
Wie gehe ich im href einen Ordner nach oben?
Nutze ../ für jede Ebene. Eine Seite unter /blog/post.html mit CSS unter /css/site.css nutzt href="../css/site.css" oder den Pfad ab dem Stammverzeichnis href="/css/site.css", wenn die Website auf einem Server läuft.
Wo muss @import stehen?
Ganz oben im Stylesheet, vor allen anderen Regeln. Nur @charset- und @layer-Anweisungen dürfen davor stehen. Ein @import nach Style-Regeln wird ignoriert.
Wie der Browser ein href auflöst
Der Browser startet bei der URL der Seite selbst, entfernt den Dateinamen und wendet das href auf den verbleibenden Ordner an. ../ geht einen Ordner nach oben, ./ bleibt im selben, und ein Schrägstrich am Anfang beginnt wieder beim Stammverzeichnis der Website.
Wenn du eine Seite per Doppelklick öffnest, ist das Stammverzeichnis deine Festplatte, nicht dein Projekt. Deshalb funktioniert /css/site.css auf einem Server, scheitert aber unter einer file://-Adresse, während ein relativer Pfad in beiden Fällen funktioniert.
Inline-Styles und style-Elemente
Ein style-Element hält CSS in der Seite, spart eine Anfrage und ist praktisch für den kleinen Block Critical CSS, der den ersten Bildschirm gestaltet. Es kann nicht separat gecacht werden und wird auf jeder Seite wiederholt.
Ein style-Attribut gilt für ein einzelnes Element und schlägt Regeln aus Stylesheets, sofern diese nicht !important nutzen. Verwende es für Werte, die dein Code berechnet, nicht für das normale Design, das sich sonst nicht mehr websiteweit ändern lässt.
Das link-Element
Eine Seite mit einem verknüpften Stylesheet
Der Link steht im head. Sein href ist relativ zu dieser HTML-Datei, styles.css muss also in einem css-Ordner daneben liegen.
Das style-Element und Inline-Styles
Eingebettetes und Inline-CSS zusammen
Das style-Element färbt jedes p. Das style-Attribut am zweiten Absatz gewinnt nur für dieses Element.
@import in einem Stylesheet
Imports kommen zuerst. Sie können eine Media Query, eine supports()-Bedingung oder einen Cascade Layer mitbringen.
CSS lädt nicht? Arbeite diese Liste ab
Warum Styles nicht greifen und wie du es prüfst
Symptom
Wahrscheinliche Ursache
Lösung
404 für das CSS im Network-Tab
Falscher Pfad oder Ordner
Nutze den Pfadprüfer oben, probiere auf einem Server einen Pfad ab dem Stammverzeichnis
Überhaupt keine Anfrage für das CSS
Tippfehler in rel oder link außerhalb des HTML
Schreib rel="stylesheet" exakt, setze den Link in den head
Funktioniert lokal, scheitert online
Groß- und Kleinschreibung des Dateinamens weicht ab
Alte Styles werden weiter angezeigt
Browser-Cache
Hartes Neuladen oder eine Version anhängen wie styles.css?v=2
Einige Regeln werden ignoriert
Von späteren oder spezifischeren Regeln überschrieben
Untersuche das Element, prüfe Reihenfolge und Spezifität
@import bewirkt nichts
Es steht nach anderen Regeln
Verschiebe jedes @import an den Anfang der Datei
In der Konsole blockiert
Mit falschem Content-Type ausgeliefert
Der Server muss für .css-Dateien text/css senden
Pfadprüfer
Adresse deiner HTML-Seite
href in deinem link-Element
Der Browser fordert an:
Diese Seitenadresse ist keine vollständige URL. Beginne sie mit https:// oder file:///
Das ist eine Datei auf deiner Festplatte. Pfade, die mit / beginnen, zeigen auf das Stammverzeichnis des Laufwerks, nicht auf dein Projekt.