Du har skrevet HTML-koden din, og nettsiden viser innholdet. Men alt er svart tekst på hvit bakgrunn. Overskriftene ser kjedelige ut, teksten flyter fra kant til kant, og ingenting ser ut som en ekte nettside. Du trenger CSS for å endre utseendet. Men hvor skriver du CSS-koden, og hvordan kobler du den til HTML-filen? Det finnes tre måter å legge til CSS, og valget påvirker både vedlikehold og struktur.
Ekstern CSS: den anbefalte måten å legge til CSS
Ekstern CSS betyr at du skriver all stylingen i en egen fil med filendelsen .css. Deretter kobler du denne filen til HTML-dokumentet med et link-element i head-seksjonen. Link-elementet trenger to attributter: rel="stylesheet" som forteller nettleseren at filen inneholder CSS, og href som peker til CSS-filen.
Fordelen er tydelig: HTML-filen inneholder bare innhold og struktur, mens CSS-filen inneholder bare utseende. Når du vil endre fonten på hele nettsiden, gjør du det ett sted. Har du 50 sider som bruker samme CSS-fil, oppdaterer du alle 50 med en eneste endring. Det er dette som gjør ekstern CSS til standardvalget for alle nettsider utover de aller enkleste.
En annen fordel mange overser: nettleseren cacher CSS-filen. Når en besøkende går fra forsiden til en underside, slipper nettleseren å laste CSS-en på nytt. Siden laster raskere, og brukeren får en bedre opplevelse.
Intern CSS: nyttig for raske tester
Intern CSS skrives direkte i HTML-dokumentet, inne i et style-element i head-seksjonen. Du bruker nøyaktig samme CSS-syntaks som i en ekstern fil. Forskjellen er at stylingen bare gjelder for den ene siden.
Intern CSS fungerer fint når du tester noe raskt. Du slipper å opprette en egen fil og kan se resultatet umiddelbart. Men i det øyeblikket du trenger samme styling på flere sider, kopierer du kode. Og kopiert kode er kode du må oppdatere flere steder når noe endres. Det er en oppskrift på feil.
Det finnes et unntak der intern CSS faktisk er et bevisst valg: kritisk CSS. Noen nettsider legger CSS-en som trengs for å vise innholdet "above the fold" direkte i HTML-dokumentet. Resten lastes asynkront etterpå. Dette er en ytelsesteknikk som reduserer tiden til første rendering. Men for de fleste prosjekter er ekstern CSS riktig valg.
Inline CSS: sterkest, men minst fleksibel
Inline CSS legges direkte på et enkelt HTML-element med style-attributten. Du skriver CSS-egenskapene rett i åpnetaggen, for eksempel style="color: red; font-size: 20px;". Stylingen gjelder bare for det ene elementet.
Inline CSS har høyest spesifisitet av de tre metodene. Det betyr at inline-stiler overstyrer både ekstern og intern CSS. Det høres praktisk ut, men det skaper problemer. Du kan ikke bruke CSS-selektorer til å style flere elementer samtidig. Hver endring må gjøres manuelt, element for element. Og når du senere vil overstyre en inline-stil med CSS, må du bruke !important, som gjør koden enda vanskeligere å vedlikeholde.
Det eneste stedet inline CSS er vanlig er i HTML-e-poster. E-postklienter som Outlook og Gmail støtter eksterne stilark dårlig, og intern CSS fungerer heller ikke pålitelig. Der er inline CSS ofte det eneste alternativet som gir konsistent resultat.
Hvilken metode bør du velge?
For nettsider er svaret nesten alltid ekstern CSS. Her er en oversikt over når du bruker hva:
- Ekstern CSS for alle prosjekter med mer enn en side, eller når du jobber i team. Separasjonen mellom HTML og CSS gjør koden lettere å lese, vedlikeholde og feilsøke.
- Intern CSS for raske prototyper og testing. Greit når du eksperimenterer med en enkelt side og ikke trenger gjenbruk.
- Inline CSS bare når ingen annen metode fungerer, som i HTML-e-poster. Unngå det ellers.
En vanlig nybegynnerfeil er å blande alle tre metodene i samme prosjekt uten system. Du legger til litt intern CSS her, litt inline der, og har en ekstern fil i tillegg. Resultatet er at du ikke vet hvilken regel som gjelder hvor. Velg en strategi og hold deg til den. For de aller fleste betyr det: bruk ekstern CSS og ikke se deg tilbake.
Rekkefølge og konflikter mellom metodene
Når du bruker flere metoder samtidig, bestemmer nettleseren hvilken regel som vinner. Hovedregelen er at inline CSS vinner over intern CSS, som igjen vinner over ekstern CSS. Men dette er en forenkling. I praksis avgjøres det av spesifisitet og rekkefølge. Har du en ekstern CSS-fil med en ID-selektor og en intern stil med en klasse-selektor, vinner den eksterne fordi ID har høyere spesifisitet.
Poenget er ikke å lære alle reglene utenat. Poenget er å unngå konflikter i utgangspunktet. Når du holder deg til ekstern CSS og bruker selektorer konsekvent, slipper du å lure på hvorfor en stil ikke virker. Du kan lese mer om hvordan CSS håndterer konflikter i MDN sin dokumentasjon om CSS cascade.
Neste steg
Nå vet du hvordan du legger til CSS i et HTML-dokument. Neste steg er å lære hvilke elementer du faktisk kan style og hvordan du velger dem. Les videre om CSS-selektorer for å forstå hvordan du treffer riktige elementer med CSS-koden din. Vil du forstå hvordan farger i CSS fungerer, er det en naturlig fortsettelse når du vil begynne å endre utseendet på nettsiden.
Denne artikkelen bygger på en videoleksjon fra kurset CSS – komplett guide på Utdannet.no. I kurset lærer du å sette opp prosjektstruktur med eksterne stilark, organisere CSS-koden din, og style komplette nettsider fra bunnen av.
