Lær å style nettsider med CSS, selektorer, boksmodellen, flexbox og grid.
Fra svart tekst på hvit bakgrunn
Uten CSS ville alle nettsider sett ut som enkle tekstdokumenter – svart Times New Roman-tekst på hvit bakgrunn. CSS (Cascading Style Sheets) er språket som gir nettsider utseende og layout. Der HTML definerer hva innholdet er, bestemmer CSS hvordan det ser ut: farger, skrift, avstander, sideoppsett, animasjoner – og tilpasning til ulike skjermstørrelser.
Navnet er beskrivende. «Cascading» betyr at stiler kan arves fra overordnede elementer og overstyres av mer spesifikke regler. En CSS-regel består av en selektor som velger elementer, og en deklarasjonsblokk med egenskaper og verdier.
Du kan inkludere CSS på tre måter. Et eksternt stilark er en egen .css-fil koblet til med <link rel="stylesheet" href="stil.css"> – dette er den anbefalte metoden. Et internt stilark skrives i en <style>-tag i <head>. Og inline-stiler skrives direkte på et element med style-attributten. Eksternt stilark er best fordi det skiller HTML og CSS, lar deg gjenbruke stiler på flere sider, og caches av nettleseren for raskere lasting.
Å velge riktig element
Selektorer bestemmer hvilke elementer en regel påvirker. En elementselektor som p velger alle avsnitt. En klasseselektor starter med punktum, som .viktig, og velger elementer med den klassen (satt med class-attributten i HTML). En ID-selektor starter med #, som #hovedmeny, og velger ett unikt element.
Selektorer kan kombineres. Mellomrom velger etterkommere – nav a treffer alle lenker inne i <nav>. Tegnet > velger direkte barn, og komma gir samme stil til flere selektorer. Pseudo-klasser velger etter tilstand: a:hover gjelder når musa er over lenken, input:focus når feltet er valgt, og li:first-child det første elementet i en liste.
En viktig detalj er spesifisitet – hvem som vinner når flere regler treffer samme element. ID-selektorer er mer spesifikke enn klasseselektorer, som igjen er mer spesifikke enn elementselektorer. Får et avsnitt regler fra p, .tekst og #intro samtidig, vinner ID-en, og teksten blir rød. Dette er nyttig å huske når stiler «ikke vil endre seg».
Når du først har valgt elementene, finnes det hundrevis av egenskaper, men noen brukes mest: font-family, font-size, line-height og color for tekst; background-color og background-image for bakgrunn; width, padding og margin for størrelse og avstand; og border, border-radius og box-shadow for kanter. Enheter teller også: px er faste piksler, rem er relativt til rotens skriftstørrelse, % er prosent av foreldren, og vw/vh er prosent av vinduets bredde og høyde.
Boksen rundt alt
For å kontrollere layout må du forstå boksmodellen. CSS behandler hvert element som en rektangulær boks med fire lag fra innsiden og ut: content (innholdet selv), padding (polstring mellom innhold og kant), border (kantlinjen) og margin (avstanden til andre elementer).
Med standard boksmodell legges padding og border utenpå den oppgitte bredden. Et element med width: 300px, padding: 20px og border: 2px blir derfor egentlig 364 px bredt – noe som lett blir forvirrende. Derfor bruker nesten alle utviklere box-sizing: border-box, ofte på alle elementer med * { box-sizing: border-box; }. Da inkluderes padding og border i den oppgitte bredden, slik at width: 200px med padding og border faktisk forblir 200 px totalt. Innholdsområdet krymper i stedet automatisk.
Moderne layout: flexbox og grid
De to viktigste layoutverktøyene i moderne CSS er flexbox og grid. Flexbox ordner elementer i én dimensjon – en rad eller en kolonne. Du aktiverer det med display: flex på foreldreelementet (containeren), og barna blir flex-elementer. De viktigste container-egenskapene er flex-direction (row eller column), justify-content for fordeling langs hovedaksen, align-items for justering langs kryssaksen, flex-wrap for å bryte til ny linje, og gap for avstand. På barna gir flex: 1 at elementet tar ledig plass. Med standard flex-direction: row sentrerer du elementene horisontalt med justify-content: center. Flexbox er perfekt for navigasjonsmenyer og kolonner som skal dele plassen likt.
CSS Grid er todimensjonalt og lar deg plassere elementer i både rader og kolonner samtidig – ideelt for hele sideoppsett. Du definerer kolonner med grid-template-columns og rader med grid-template-rows, og bruker fr-enheten for å fordele ledig plass. Et element kan spenne over flere kolonner med grid-column. En kraftig teknikk er grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)), som lager et responsivt rutenett der kortene automatisk får flere kolonner på brede skjermer og færre på smale – helt uten media queries. Enkelt sagt: bruk flexbox når du ordner ting i én retning, og grid når du trenger et ekte rutenett.
Oppsummering
CSS er det som gjør nettsider til mer enn svart tekst på hvit bakgrunn. CSS styrer presentasjonen, og selektorer (element, klasse, ID, pseudo-klasser) velger hvilke elementer regler gjelder for – der spesifisitet avgjør hvem som vinner.
Boksmodellen med content, padding, border og margin er nøkkelen til avstander og størrelse, og box-sizing: border-box gjør beregningene intuitive. For oppsett bruker du flexbox til én-dimensjonale rader og kolonner, og CSS Grid til todimensjonale rutenett. Prinsippet under alt er det samme: HTML for struktur, CSS for utseende.
Dette kapitlet er skrevet av Anthropics toppmodeller (Claude Opus og Claude Fable) og er foreløpig ikke manuelt gjennomgått — kvalitetskontrollen gjøres av uavhengige KI-agenter, og innmeldte feil rettes fortløpende. Funnet en feil? Meld fra, så retter vi den. Les mer om hvordan innholdet lages.