CSS koppelen aan HTML: link, style, @import en paden herstellen
Koppel een stylesheet met het link-element, of gebruik style, inline stijlen of @import. Test relatieve en absolute paden live en werk een checklist af als CSS niet wil laden.
CSS koppelen aan HTML
Om een CSS-bestand aan een HTML-pagina te koppelen, zet u <link rel="stylesheet" href="styles.css"> in de head. De href is een pad van het HTML-bestand naar het CSS-bestand, dus een bestand in een map css heeft href="css/styles.css" nodig. U kunt CSS ook in een style-element of een style-attribuut schrijven, of bestanden binnenhalen met @import.
Vier manieren om CSS aan een pagina toe te voegen
Methode
Waar het staat
Het beste voor
<link rel="stylesheet">
In de head
Bijna alles: één bestand gedeeld door veel pagina's
<style>-element
In de head
Kleine pagina's, critical CSS, demo's
style="..."-attribuut
Op één element
Eenmalige waarden die vanuit code worden gezet
@import url(...)
Bovenaan een CSS-bestand
CSS opsplitsen in lagen of bestanden
Bijna elk geval van een pagina zonder opmaak komt neer op het pad of de attributen van het link-element. Deze gids toont elke manier om CSS toe te voegen, bevat een padcontrole die precies uitrekent naar welke URL uw href wijst, en eindigt met een checklist voor als de stijlen nog steeds niet verschijnen.
Voer het adres van uw HTML-pagina in, zoals het in de adresbalk van de browser staat.
Voer de href in die u in het link-element hebt gebruikt.
De controle toont de volledige URL die de browser zal opvragen, berekend in uw browser met de standaardregels voor URL's.
Open die URL in een nieuw tabblad. Als u uw CSS niet ziet, klopt het pad niet.
Het attribuut type="text/css" is optioneel. CSS is de enige stylesheettaal die browsers gebruiken.
Zet stylesheet-links in de head. Links in de body zijn toegestaan, maar kunnen een flits van ongestijlde inhoud veroorzaken.
Voeg een media-attribuut toe, zoals media="print", om een stylesheet alleen toe te passen als die voorwaarde klopt.
Volgorde telt. Als twee regels even specifiek zijn, wint de regel die later is geladen, dus koppel uw eigen CSS na een eventueel framework.
Veelgestelde vragen
Waarom wordt mijn CSS-bestand niet aan mijn HTML gekoppeld?
Controleer eerst het pad: open de ontwikkelaarstools van de browser, kijk op het tabblad Network en zoek het CSS-verzoek. Een 404 betekent dat de href naar de verkeerde plek wijst. Controleer ook of rel="stylesheet" goed is gespeld, of bestandsnamen dezelfde hoofdletters en kleine letters hebben, en of u het bestand hebt opgeslagen.
Wat is het verschil tussen een relatief en een absoluut pad?
Een relatief pad zoals css/site.css wordt opgelost vanuit de map van de huidige pagina. Een pad dat met / begint, wordt opgelost vanuit de root van de site, en een volledige URL die met https:// begint, wijst naar een exact adres. Rootpaden werken niet als u het bestand rechtstreeks vanaf de schijf opent.
Moet ik @import of link gebruiken?
Gebruik bij voorkeur link. Elke @import wordt pas ontdekt nadat het bestand waarin hij staat is gedownload, dus geketende imports laden na elkaar. @import is nuttig voor ordening met layer() of binnen een buildtool die de bestanden toch bundelt.
Hoe ga ik in de href een map omhoog?
Gebruik ../ voor elk niveau. Een pagina op /blog/post.html met CSS op /css/site.css gebruikt href="../css/site.css", of het rootpad href="/css/site.css" als de site op een server draait.
Waar moet @import staan?
Helemaal bovenaan het stylesheet, vóór alle andere regels. Alleen @charset- en @layer-statements mogen ervoor staan. Een @import na stijlregels wordt genegeerd.
Hoe de browser een href oplost
De browser begint bij de eigen URL van de pagina, laat de bestandsnaam vallen en past de href toe op de map die overblijft. ../ gaat één map omhoog, ./ blijft in dezelfde map, en een slash aan het begin start opnieuw bij de root van de site.
Als u een pagina opent door erop te dubbelklikken, is de root uw schijf, niet uw project. Daarom werkt /css/site.css op een server maar faalt het vanaf een file://-adres, terwijl een relatief pad in beide gevallen werkt.
Inline stijlen en style-elementen
Een style-element houdt CSS in de pagina, wat een verzoek scheelt en handig is voor het kleine blok critical CSS dat het eerste scherm opmaakt. Het kan niet apart worden gecachet en wordt op elke pagina herhaald.
Een style-attribuut geldt voor één element en wint van regels uit stylesheets, tenzij die !important gebruiken. Gebruik het voor waarden die uw code berekent, niet voor gewoon ontwerp, want dat wordt dan onmogelijk om voor de hele site te wijzigen.
Het link-element
Een pagina met één gekoppeld stylesheet
De link staat in de head. De href is relatief ten opzichte van dit HTML-bestand, dus styles.css moet in een map css ernaast staan.
Het style-element en inline stijlen
Ingesloten en inline CSS samen
Het style-element kleurt elke p. Het style-attribuut op de tweede alinea wint alleen voor dat element.
@import binnen een stylesheet
Imports komen eerst. Ze kunnen een media query, een supports()-voorwaarde of een cascade layer meekrijgen.
CSS laadt niet? Loop deze lijst af
Waarom stijlen niet worden toegepast, en hoe u dat controleert
Symptoom
Waarschijnlijke oorzaak
Oplossing
404 voor de CSS op het tabblad Network
Verkeerd pad of verkeerde map
Gebruik de padcontrole hierboven; probeer op een server een rootpad
Helemaal geen verzoek voor de CSS
Typefout in rel of link buiten de HTML
Schrijf precies rel="stylesheet"; zet de link in de head
Werkt lokaal, faalt online
Hoofdletters in de bestandsnaam verschillen
Oude stijlen blijven zichtbaar
Browsercache
Harde herlaad, of voeg een versie toe zoals styles.css?v=2
Sommige regels genegeerd
Overschreven door latere of specifiekere regels
Inspecteer het element; controleer volgorde en specificiteit
@import doet niets
Staat na andere regels
Zet elke @import bovenaan het bestand
Geblokkeerd in de console
Geleverd met het verkeerde content type
De server moet text/css sturen voor .css-bestanden
Padcontrole
Adres van uw HTML-pagina
href in uw link-element
De browser vraagt op:
Dat paginaadres is geen volledige URL. Begin het met https:// of file:///
Dit is een bestand op uw schijf. Paden die met / beginnen, wijzen naar de root van de schijf, niet naar uw project.