Farger, typografi og boksmodellen
Bruk farger med hex-, rgb- og hsl-verdier, velg skrifter, angi størrelser og linjehøyder, og bruk margin, border og padding til å skape avstand mellom elementer.
Farger, typografi og boksmodellen er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
CSS-fargeverdier
CSS støtter flere fargeformater. Bruk det formatet som er tydeligst i den aktuelle sammenhengen: hex-koder for merkevarefarger, hsl() for enkle fargejusteringer, rgb() for programmatisk angitte verdier og navngitte farger for rask prototyping.
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */Bakgrunnsfarger og bilder
Angi bakgrunner for elementer med background-color. Bruk background-image med gradienter eller URL-er. Forkortelsen background kombinerer farge, bilde, posisjon, størrelse og gjentakelse i én deklarasjon.
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;Skriftegenskaper
Styr typografien med: font-family (skrifttype), font-size (em, rem, px), font-weight (100–900), font-style (kursiv), line-height (lesbarhetsforhold) og letter-spacing (bokstavavstand).
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}Tekstegenskaper
Flere tekststiler: text-align (venstre, midtstilt, høyre, blokkjustert), text-decoration (understreking, gjennomstreking, ingen), text-transform (store bokstaver, stor forbokstav) og text-overflow: ellipsis for avkorting.
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem vs em vs px
px er absolutt. em er relativ til elementets egen skriftstørrelse (og påvirkes av kaskaden). rem er relativ til rotens skriftstørrelse (forutsigbart). Bruk rem til det meste av størrelsesangivelsen for å respektere brukerens skriftinnstillinger.
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */Boksmodellen
Alle HTML-elementer er rektangulære bokser med fire lag: innhold (elementets faktiske dimensjoner), utfylling (plass innenfor kanten), kant og marg (plass utenfor kanten).
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
Som standard (content-box) legges utfylling og kant til den angitte bredden. Med box-sizing: border-box inkluderes utfylling og kant i den angitte bredden — noe som nesten alltid er det du ønsker.
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}Sammenslåing av marger
Vertikale marger mellom tilstøtende blokkelementer slås sammen — bare den største margen gjelder. Margene til et foreldreelement og dets første eller siste underordnede element slås også sammen. Barn av Flexbox og Grid slår ikke sammen marger.
Forkortet skrivemåte for padding
Forkortelsen padding: top right bottom left angir alle sider. To verdier angir vertikal og horisontal utfylling. Tre angir topp, horisontal utfylling og bunn.
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */Kantegenskaper
Angi kanter med forkortelsen border: width style color. For individuelle sider bruker du border-top og tilsvarende egenskaper. Bruk border-radius for avrundede hjørner. outline ligner, men påvirker ikke layouten.
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}Overflow
overflow: hidden klipper innhold som overskrider elementets størrelse. overflow: scroll legger til rullefelt. overflow: auto legger bare til rullefelt ved behov. Bruk overflow-x og overflow-y for å styre aksene uavhengig av hverandre.
Hurtigsjekk
Med box-sizing: border-box og width: 300px; padding: 20px; border: 2px solid, hva blir elementets totale gjengitte bredde?
Oppsummering: farger, typografi og boksmodellen
Angi farger med hex, rgb eller hsl. Bruk skrifter med font-family, størrelse, vekt og line-height. Alle elementer er bokser: innhold + utfylling + kant + marg. Aktiver box-sizing: border-box globalt for forutsigbare størrelser.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Farger, typografi og boksmodellen» gratis?
Ja – hele teksten i «Farger, typografi og boksmodellen» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Farger, typografi og boksmodellen»?
Bruk farger med hex-, rgb- og hsl-verdier, velg skrifter, angi størrelser og linjehøyder, og bruk margin, border og padding til å skape avstand mellom elementer. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Farger, typografi og boksmodellen»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Selektorer og kaskaden
- Farger, typografi og boksmodellen
- Display: grunnleggende block, inline, flex og grid
- Plassering: relative, absolute, fixed og sticky