CSS — Cascading Style Sheets og SEO
CSS styrer den visuelle præsentation af websider — og render-blocking CSS kan skade din Core Web Vitals-score.
Hvad er CSS?
CSS — Cascading Style Sheets — er sproget der styrer den visuelle præsentation af HTML-dokumenter. Hvor HTML definerer struktur og indhold, bestemmer CSS farver, skrifttyper, layout, mellemrum og animation. CSS er adskillelsen af præsentation fra indhold — et grundprincip i moderne webdesign.
CSS fungerer ved at selektere HTML-elementer og anvende egenskaber på dem:
h1 {
font-size: 2rem;
color: #01803d;
}Her selekterer vi alle <h1>-elementer og giver dem en specifik skriftstørrelse og farve.
Cascading og specificity
Navnet “Cascading” refererer til den måde CSS-regler appliceres i en prioriteret rækkefølge — en kaskade. Hvis flere regler gælder for samme element, vinder den med højest specificity (specificitet).
Specificity-hierarkiet fra højest til lavest:
- Inline styles (
style="..."direkte på elementet) - ID-selektorer (
#mit-id) - Klasse-selektorer, attribut-selektorer og pseudo-klasser (
.min-klasse) - Element-selektorer (
p,h1,div)
Forståelse af cascading er vigtig for at skrive vedligeholdelig CSS — overdreven brug af !important er et tegn på dårlig CSS-arkitektur.
Eksternt, internt og inline CSS
CSS kan inkluderes på tre måder:
Eksternt stylesheet (anbefalet):
<link rel="stylesheet" href="/styles.css">CSS ligger i en separat fil og indlæses for alle sider. Browseren cacher filen, hvilket gavner performance.
Internt stylesheet (i <head>):
<style>
body { background: white; }
</style>Nyttigt til kritisk CSS — se nedenfor.
Inline styles (undgå):
<p style="color: red;">Tekst</p>Vanskelige at vedligeholde, kan ikke genbruges og har høj specificity der kan skabe problemer.
Render-blocking CSS og LCP
CSS er som standard render-blocking: browseren stopper med at vise siden, indtil alle CSS-filer i <head> er downloadet og fortolket. Dette er nødvendigt fordi browseren skal kende styles for at rendere korrekt — men det forsinker Largest Contentful Paint (LCP), som er en Core Web Vitals-metrik Google bruger i ranking.
Typiske problemer:
- Store uoptimerede stylesheets
- CSS indlæst fra langsom tredjeparts-server
- Ubrugte CSS-regler der øger filstørrelsen
Kritisk CSS og performance-optimering
Kritisk CSS er de styles der er nødvendige for at rendere det synlige indhold “above the fold” — det brugeren ser uden at scrolle. Ved at inline den kritiske CSS direkte i <head> og indlæse resten asynkront, kan man reducere render-blocking og forbedre LCP markant.
<style>
/* Kritisk CSS inlinet direkte */
header { background: #fff; }
h1 { font-size: 2rem; }
</style>
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'">CSS-minificering
Minificering fjerner whitespace, kommentarer og unødvendige tegn fra CSS-filer uden at ændre funktionalitet. En uminificeret CSS-fil på 100 KB kan reduceres til 70-80 KB, hvilket direkte reducerer indlæsningstid.
De fleste moderne build-tools (Vite, Webpack, esbuild) minificerer automatisk i production-builds. Tjek at dit CMS eller deploymentsetup gør det samme.
CSS og SEO i praksis
CSS påvirker ikke direkte hvad Googlebot indexer — Google læser HTML-indholdet, ikke styles. Men CSS påvirker SEO indirekte via:
- Core Web Vitals: render-blocking CSS forringer LCP
- Mobile usability: fejlagtig CSS kan gøre sider ubrugelige på mobil
- Skjult indhold:
display: noneogvisibility: hidden— Google kan stadig indexere dette indhold, men vægter det lavere
Blokerer CSS altid rendering?
Eksternt CSS i <head> er render-blocking som standard. CSS med media-attribut der ikke matcher den aktuelle enhed er det ikke.
Hvad er kritisk CSS? Kritisk CSS er de styles der er nødvendige for at rendere det synlige indhold uden scroll. Inlining af kritisk CSS forbedrer LCP og First Contentful Paint.
Kan Google læse CSS? Ja, Googlebot downloader og fortolker CSS som en del af rendering-processen — det er sådan Google afgør hvad der er synligt for brugeren.
Hvad er CSS-minificering? Minificering fjerner whitespace og kommentarer fra CSS-filer for at reducere filstørrelse og forbedre indlæsningstid.
Sidst opdateret: marts 2026. Denne artikel er en del af Stegger.dk’s SEO-ordbog.