4.3 CSS – stil og layout | IT 1

Lær å style nettsider med CSS, selektorer, boksmodellen, flexbox og grid.

70 min

7 oppgaver

CSSSelektorBoksmodellenFlexbox

Du leser den tradisjonelle versjonen

Din fremgang i kapitlet

0 / 7 oppgaver

CSS – stil og layout

CSS (Cascading Style Sheets) er språket som gir nettsider utseende og layout. Mens HTML definerer hva innholdet er, bestemmer CSS hvordan det skal se ut. Uten CSS ville alle nettsider sett ut som enkle tekstdokumenter med standardstiler fra nettleseren – svart tekst på hvit bakgrunn med Times New Roman-skrift.

Med CSS kan du kontrollere alt fra farger, skrifttyper og avstander til komplekse sideoppsett, animasjoner og overganger. CSS gjør det også mulig å tilpasse utseendet til ulike skjermstørrelser, noe som er essensielt for at nettsider skal fungere godt på både datamaskiner, nettbrett og mobiltelefoner.

I dette kapittelet lærer du å bruke CSS-selektorer for å velge elementer, sette egenskaper for utseende, forstå boksmodellen, og lage moderne layout med flexbox og grid.

CSS (Cascading Style Sheets)

CSS er et stilspråk som beskriver presentasjonen av HTML-dokumenter. CSS skiller innholdets struktur (HTML) fra presentasjonen (visuell stil), noe som gir større fleksibilitet og kontroll. Det «kaskaderende» i navnet betyr at stiler kan arves fra overordnede elementer og overstyres av mer spesifikke regler. CSS-regler består av en selektor som velger elementer, og en deklarasjonsblokk med egenskaper og verdier. CSS kan inkluderes i HTML på tre måter: eksternt stilark (anbefalt), internt stilark i head, eller inline-stiler direkte på elementer.

Det finnes tre metoder for å legge til CSS i en HTML-side:

1. Eksternt stilark (anbefalt)
CSS-koden skrives i en egen .css-fil som kobles til HTML-dokumentet:

<head>
  <link rel="stylesheet" href="stil.css">
</head>

/* fil: stil.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

h1 {
  color: #333;
}

2. Internt stilark
CSS-koden skrives i en <style>-tag i HTML-dokumentets <head>:

<head>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>
</head>

3. Inline-stiler
CSS skrives direkte på et element med style-attributten:

<p style="color: blue; font-size: 18px;">Denne teksten er blå.</p>

Eksternt stilark er den anbefalte metoden fordi den gir best separasjon mellom HTML og CSS, gjør det enkelt å gjenbruke stiler på flere sider, og gjør koden mer ryddig og vedlikeholdbar. Nettleseren cacher også eksterne stilark, noe som gjør lastingen raskere ved gjentatte besøk.

Selektorer bestemmer hvilke HTML-elementer en CSS-regel skal påvirke. Det finnes mange typer selektorer:

Elementselektorer – Velger alle elementer av en type:

p {
  color: #333;
  line-height: 1.6;
}

h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

Klasseselektorer – Velger elementer med en bestemt klasse (starter med punktum):

.viktig {
  color: red;
  font-weight: bold;
}

.kort {
  background-color: #f0f0f0;
  padding: 1rem;
  border-radius: 8px;
}

Brukes i HTML med class-attributten:

<p class="viktig">Denne teksten er viktig!</p>
<div class="kort">
  <h3>Et kort</h3>
  <p>Innhold i kortet.</p>
</div>

ID-selektorer – Velger ett bestemt element (starter med #):

#hovedmeny {
  background-color: navy;
  color: white;
}

Kombinerte selektorer:

/* Lenker inne i nav-elementet */
nav a {
  text-decoration: none;
  color: white;
  padding: 0.5rem 1rem;
}

/* Elementer med klasse "aktiv" inne i en liste */
ul .aktiv {
  font-weight: bold;
}

/* Direkte barn av en fleks-beholder */
.container > div {
  flex: 1;
}

Pseudo-klasser – Velger elementer basert på tilstand:

a:hover {
  color: orange;          /* Når musepekeren er over lenken */
}

input:focus {
  border-color: blue;     /* Når feltet er i fokus */
}

li:first-child {
  font-weight: bold;      /* Første element i en liste */
}

CSS-selektor

En CSS-selektor er et mønster som angir hvilke HTML-elementer en stilregel skal gjelde for. De vanligste typene er: elementselektorer (p, h1) som velger alle elementer av en type, klasseselektorer (.klasse) som velger elementer med en bestemt class-attributt, og ID-selektorer (#id) som velger ett unikt element. Selektorer kan kombineres med mellomrom for etterkommere (nav a), med > for direkte barn (ul > li), og med komma for å gi samme stil til flere selektorer (h1, h2, h3). Pseudo-klasser som :hover og :focus velger elementer basert på brukerinteraksjon.

CSS har hundrevis av egenskaper, men noen brukes mye oftere enn andre:

Tekst og skrift:

body {
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

Farger og bakgrunn:

.hero {
  background-color: #1a1a2e;
  color: white;
  background-image: url('bakgrunn.jpg');
  background-size: cover;
  background-position: center;
}

Avstander og størrelse:

.kort {
  width: 300px;
  max-width: 100%;
  padding: 1.5rem;
  margin: 1rem auto;
}

Kantlinjer og avrunding:

.boks {
  border: 2px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Enheter i CSS: px (piksler – fast størrelse), rem (relativt til rot-skriftstørrelsen), em (relativt til forelders skriftstørrelse), % (prosent av foreldreelementet), vw/vh (prosent av visningsvinduets bredde/høyde).

Hvert HTML-element behandles av CSS som en rektangulær boks med fire lag, fra innsiden og ut:

1. Content (innhold) – Selve innholdet (tekst, bilder osv.)
2. Padding (polstring) – Avstand mellom innholdet og kantlinjen
3. Border (kantlinje) – En synlig kantlinje rundt elementet
4. Margin (marg) – Avstand mellom elementet og omgivende elementer

.boks {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

Med standard boksmodell blir den totale bredden av denne boksen: 300px (innhold) + 40px (padding venstre + høyre) + 4px (border venstre + høyre) + 20px (margin venstre + høyre) = 364px.

For å gjøre beregninger enklere bruker de fleste utviklere box-sizing: border-box, som inkluderer padding og border i den angitte bredden:

* {
  box-sizing: border-box;
}

.boks {
  width: 300px;       /* Total bredde inkl. padding og border */
  padding: 20px;
  border: 2px solid black;
  margin: 10px;       /* Margin legges fortsatt til utenfor */
}

Med border-box blir innholdsområdet automatisk redusert slik at totalbredden forblir 300px. De fleste moderne CSS-rammeverk setter box-sizing: border-box som standard fordi det gir mer intuitiv størrelsesberegning.

Boksmodellen

Boksmodellen er det grunnleggende konseptet i CSS der hvert HTML-element representeres som en rektangulær boks med fire konsentriske lag: content (innholdet), padding (polstring mellom innhold og kantlinje), border (kantlinje) og margin (avstand til omgivende elementer). Standard box-sizing: content-box beregner bredde og høyde kun for innholdsområdet, mens box-sizing: border-box inkluderer padding og border i den angitte bredden. Å forstå boksmodellen er avgjørende for å kontrollere størrelse, avstander og layout i CSS.

✏️Eksempel: Boksmodellen i praksis

La oss lage et kort med synlig boksmodell:

* {
  box-sizing: border-box;
}

.profil-kort {
  width: 320px;
  padding: 24px;
  margin: 16px auto;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profil-kort h2 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
}

.profil-kort p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

<div class="profil-kort">
  <h2>Kari Nordmann</h2>
  <p>Elev ved VG2, Informasjonsteknologi. Interessert i webdesign og programmering.</p>
</div>

Resultatet er et elegant kort med avrundede hjørner, subtil skygge og god avstand mellom innhold og kantlinje. Totalbredden er nøyaktig 320px takket være border-box.

Flexbox er en kraftig CSS-layoutmodul designet for å arrangere elementer i én dimensjon – enten horisontalt (som en rad) eller vertikalt (som en kolonne). Flexbox gjør det enkelt å fordele plass, sentrere elementer og lage responsive oppsett.

For å bruke flexbox setter du display: flex på foreldreelementet (flex-containeren). Barna blir da flex-elementer som automatisk plasseres ved siden av hverandre:

.meny {
  display: flex;
  justify-content: space-between;  /* Fordel plass mellom elementene */
  align-items: center;             /* Sentrer vertikalt */
  padding: 1rem 2rem;
  background-color: #2c3e50;
}

.meny a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
}

<nav class="meny">
  <a href="/">Hjem</a>
  <a href="/om">Om oss</a>
  <a href="/tjenester">Tjenester</a>
  <a href="/kontakt">Kontakt</a>
</nav>

Viktige flexbox-egenskaper for containeren:
- flex-direction: row (standard, horisontalt) eller column (vertikalt)
- justify-content: Fordeling langs hovedaksen (flex-start, center, space-between, space-around, space-evenly)
- align-items: Justering langs kryssaksen (flex-start, center, flex-end, stretch)
- flex-wrap: wrap lar elementene bryte til ny linje hvis det ikke er plass
- gap: Avstand mellom flex-elementene

Viktige flexbox-egenskaper for barna:
- flex: 1 – Elementet tar opp tilgjengelig plass
- flex-grow, flex-shrink, flex-basis – Finere kontroll over størrelse
- order – Endre rekkefølgen uten å endre HTML

Her er et eksempel med tre like brede kolonner:

.tre-kolonner {
  display: flex;
  gap: 1.5rem;
}

.tre-kolonner > div {
  flex: 1;
  padding: 1.5rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

<div class="tre-kolonner">
  <div>
    <h3>Kolonne 1</h3>
    <p>Innhold i første kolonne.</p>
  </div>
  <div>
    <h3>Kolonne 2</h3>
    <p>Innhold i andre kolonne.</p>
  </div>
  <div>
    <h3>Kolonne 3</h3>
    <p>Innhold i tredje kolonne.</p>
  </div>
</div>

CSS Grid er en todimensjonal layoutmodul som lar deg plassere elementer i både rader og kolonner samtidig. Grid er ideelt for sideoppsett og komplekse layouter.

.side-layout {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  min-height: 100vh;
}

.header   { grid-column: 1 / -1; }  /* Spenner over alle kolonner */
.sidebar  { background-color: #f0f0f0; padding: 1rem; }
.innhold  { padding: 1rem; }
.annonser { background-color: #f0f0f0; padding: 1rem; }
.footer   { grid-column: 1 / -1; }

<div class="side-layout">
  <header class="header">Toppmeny</header>
  <aside class="sidebar">Sidemeny</aside>
  <main class="innhold">Hovedinnhold</main>
  <aside class="annonser">Annonser</aside>
  <footer class="footer">Bunntekst</footer>
</div>

Viktige grid-egenskaper:
- grid-template-columns: Definerer antall og bredde på kolonner
- grid-template-rows: Definerer antall og høyde på rader
- gap: Avstand mellom cellene
- grid-column: Bestemmer hvilke kolonner et element spenner over
- grid-row: Bestemmer hvilke rader et element spenner over
- fr-enheten: En fraksjon av tilgjengelig plass

Grid med repeat() og auto-fit for responsivt rutenett:

.kort-rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
}

.kort {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Dette skaper et rutenett der kortene automatisk tilpasser seg skjermbredden – flere kolonner på brede skjermer og færre på smale skjermer, uten at vi trenger media queries.

Flexbox og grid er ikke konkurrenter – de utfyller hverandre:

- Flexbox er best for éndimenjonale oppsett: navigasjonsmenyer, kort-rekker, sentrering av innhold, og fordeling av elementer langs én akse.
- Grid er best for todimensjonale oppsett: sideoppsett med header/sidebar/footer, bilderutenett, og komplekse layouter med både rader og kolonner.

En vanlig tilnærming er å bruke grid for det overordnede sideoppsettet og flexbox for layout innenfor individuelle komponenter.

Nettlesere har innebygde standardstiler som kan variere. For å sikre konsistent utseende på tvers av nettlesere, starter mange utviklere med en enkel CSS-reset:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

Dette nullstiller marginer og polstring, setter border-box som standard, og definerer en god grunnstil.

📝Oppgave 4.3.1

Hva er den anbefalte metoden for å inkludere CSS i en nettside?

📝Oppgave 4.3.2

Hvilken CSS-selektor velger alle elementer med klassen "fremhevet"?

📝Oppgave 4.3.3

I CSS-boksmodellen med box-sizing: border-box, hva er den totale bredden til et element med width: 200px; padding: 20px; border: 5px solid black;?

📝Oppgave 4.3.4

Hvilken CSS-egenskap brukes for å sentrere flex-elementer horisontalt i en flex-container med standard flex-direction: row?

📝Oppgave 4.3.5

Skriv CSS som lager en navigasjonsmeny med følgende krav:
- Mørk bakgrunnsfarge (f.eks. #2c3e50)
- Hvit tekstfarge
- Elementene skal vises horisontalt med flexbox
- Lik avstand mellom alle lenkene
- Lenkene skal ikke ha understreking
- Når musepekeren holdes over en lenke, skal bakgrunnsfargen endre seg

Skriv også HTML-strukturen for menyen med minst fire lenker.

📝Oppgave 4.3.6

Lag CSS for et responsivt kortrutenett med CSS Grid. Kravene er:
- Kortene skal automatisk tilpasse seg skjermbredden
- Minimum bredde per kort: 250px
- Avstand mellom kortene: 1.5rem
- Hvert kort skal ha hvit bakgrunn, avrundede hjørner, padding og en subtil skygge
- Skriv også HTML-strukturen med minst fire kort

Bruk grid-template-columns med repeat(), auto-fit og minmax().

📝Oppgave 4.3.7

Tre CSS-regler gjelder for det samme <p>-elementet:

p { color: blue; }
.tekst { color: green; }
#intro { color: red; }

<p id="intro" class="tekst">Hvilken farge får denne teksten?</p>

Hvilken farge vises teksten i?

Oppsummering

I dette kapittelet har du lært:

- CSS: stilspraaket som styrer presentasjonen av HTML.
- Selektorer: angir hvilke elementer en regel gjelder for.
- Boksmodellen: content, padding, border og margin.
- Flexbox og grid: moderne layout-teknikker.
- Skille innhold og stil: HTML for struktur, CSS for utseende.

Noekkelbegreper

Begrep	Forklaring
CSS	Stilspraak for presentasjon av HTML
Selektor	Mønster som velger HTML-elementer
Boksmodellen	Content, padding, border og margin

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.