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 gjev nettsider utsjånad og layout. Medan HTML definerer kva innhaldet er, avgjer CSS korleis det skal sjå ut. Utan CSS ville alle nettsider sett ut som enkle tekstdokument med standardstilar frå nettlesaren – svart tekst på kvit bakgrunn med Times New Roman-skrift.

Med CSS kan du kontrollere alt frå fargar, skrifttypar og avstandar til komplekse sideoppsett, animasjonar og overgangar. CSS gjer det òg mogleg å tilpasse utsjånaden til ulike skjermstorleikar, noko som er essensielt for at nettsider skal fungere godt på både datamaskiner, nettbrett og mobiltelefonar.

I dette kapittelet lærer du å bruke CSS-selektorar for å velje element, setje eigenskapar for utsjånad, forstå boksmodellen, og lage moderne layout med flexbox og grid.

CSS (Cascading Style Sheets)

CSS er eit stilspråk som skildrar presentasjonen av HTML-dokument. CSS skil strukturen til innhaldet (HTML) frå presentasjonen (visuell stil), noko som gjev større fleksibilitet og kontroll. Det «kaskaderande» i namnet tyder at stilar kan arvast frå overordna element og overstyrast av meir spesifikke reglar. CSS-reglar består av ein selektor som vel element, og ein deklarasjonsblokk med eigenskapar og verdiar. CSS kan inkluderast i HTML på tre måtar: eksternt stilark (tilrådd), internt stilark i head, eller inline-stilar direkte på element.

Det finst tre metodar for å leggje til CSS i ei HTML-side:

1. Eksternt stilark (tilrådd)
CSS-koden vert skriven i ei eiga .css-fil som vert kopla 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 vert skriven i ein <style>-tag i <head> til HTML-dokumentet:

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

3. Inline-stilar
CSS vert skriven direkte på eit element med style-attributten:

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

Eksternt stilark er den tilrådde metoden fordi han gjev best separasjon mellom HTML og CSS, gjer det enkelt å gjenbruke stilar på fleire sider, og gjer koden meir ryddig og vedlikehaldbar. Nettlesaren cachar òg eksterne stilark, noko som gjer lastinga raskare ved gjentekne besøk.

Selektorar avgjer kva for HTML-element ein CSS-regel skal påverke. Det finst mange typar selektorar:

Elementselektorar – Vel alle element av ein type:

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

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

Klasseselektorar – Vel element med ein bestemt klasse (startar med punktum):

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

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

Vert brukt 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-selektorar – Vel eitt bestemt element (startar med #):

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

Kombinerte selektorar:

/* 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-klassar – Vel element 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

Ein CSS-selektor er eit mønster som angjev kva for HTML-element ein stilregel skal gjelde for. Dei vanlegaste typane er: elementselektorar (p, h1) som vel alle element av ein type, klasseselektorar (.klasse) som vel element med ein bestemt class-attributt, og ID-selektorar (#id) som vel eitt unikt element. Selektorar kan kombinerast med mellomrom for etterkomarar (nav a), med > for direkte barn (ul > li), og med komma for å gje same stil til fleire selektorar (h1, h2, h3). Pseudo-klassar som :hover og :focus vel element basert på brukarinteraksjon.

CSS har hundrevis av eigenskapar, men nokre vert brukte mykje oftare 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;
}

Fargar og bakgrunn:

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

Avstandar og storleik:

.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);
}

Einingar i CSS: px (pikslar – fast storleik), rem (relativt til rot-skriftstorleiken), em (relativt til skriftstorleiken til forelderen), % (prosent av foreldreelementet), vw/vh (prosent av breidda/høgda til visingsvindauget).

Kvart HTML-element vert behandla av CSS som ein rektangulær boks med fire lag, frå innsida og ut:

1. Content (innhald) – Sjølve innhaldet (tekst, bilete osv.)
2. Padding (polstring) – Avstand mellom innhaldet og kantlinja
3. Border (kantlinje) – Ei synleg kantlinje rundt elementet
4. Margin (marg) – Avstand mellom elementet og omgjevande element

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

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

For å gjere utrekningar enklare bruker dei fleste utviklarar box-sizing: border-box, som inkluderer padding og border i den oppgjevne breidda:

* {
  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 innhaldsområdet automatisk redusert slik at totalbreidda held seg på 300px. Dei fleste moderne CSS-rammeverk set box-sizing: border-box som standard fordi det gjev meir intuitiv storleiksberekning.

Boksmodellen

Boksmodellen er det grunnleggjande konseptet i CSS der kvart HTML-element vert representert som ein rektangulær boks med fire konsentriske lag: content (innhaldet), padding (polstring mellom innhald og kantlinje), border (kantlinje) og margin (avstand til omgjevande element). Standard box-sizing: content-box reknar ut breidd og høgd berre for innhaldsområdet, medan box-sizing: border-box inkluderer padding og border i den oppgjevne breidda. Å forstå boksmodellen er avgjerande for å kontrollere storleik, avstandar og layout i CSS.

✏️Eksempel: Boksmodellen i praksis

Lat oss lage eit kort med synleg 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 eit elegant kort med avrunda hjørne, subtil skugge og god avstand mellom innhald og kantlinje. Totalbreidda er nøyaktig 320px takka vere border-box.

Flexbox er ein kraftig CSS-layoutmodul laga for å arrangere element i éin dimensjon – anten horisontalt (som ein rad) eller vertikalt (som ein kolonne). Flexbox gjer det enkelt å fordele plass, sentrere element og lage responsive oppsett.

For å bruke flexbox set du display: flex på foreldreelementet (flex-containeren). Barna blir då flex-element som automatisk vert plasserte ved sida av kvarandre:

.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-eigenskapar for containeren:
- flex-direction: row (standard, horisontalt) eller column (vertikalt)
- justify-content: Fordeling langs hovudaksen (flex-start, center, space-between, space-around, space-evenly)
- align-items: Justering langs kryssaksen (flex-start, center, flex-end, stretch)
- flex-wrap: wrap lèt elementa bryte til ny linje dersom det ikkje er plass
- gap: Avstand mellom flex-elementa

Viktige flexbox-eigenskapar for barna:
- flex: 1 – Elementet tek opp tilgjengeleg plass
- flex-grow, flex-shrink, flex-basis – Finare kontroll over storleik
- order – Endre rekkjefølgja utan å endre HTML

Her er eit døme med tre like breie kolonnar:

.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 ein todimensjonal layoutmodul som lèt deg plassere element i både rader og kolonnar samtidig. Grid er ideelt for sideoppsett og komplekse layoutar.

.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-eigenskapar:
- grid-template-columns: Definerer talet på og breidda til kolonnar
- grid-template-rows: Definerer talet på og høgda til rader
- gap: Avstand mellom cellene
- grid-column: Avgjer kva for kolonnar eit element spenner over
- grid-row: Avgjer kva for rader eit element spenner over
- fr-eininga: Ein fraksjon av tilgjengeleg 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 eit rutenett der korta automatisk tilpassar seg skjermbreidda – fleire kolonnar på breie skjermar og færre på smale skjermar, utan at vi treng media queries.

Flexbox og grid er ikkje konkurrentar – dei utfyller kvarandre:

- Flexbox er best for éindimensjonale oppsett: navigasjonsmenyar, kort-rekkjer, sentrering av innhald, og fordeling av element langs éin akse.
- Grid er best for todimensjonale oppsett: sideoppsett med header/sidebar/footer, bileterutenett, og komplekse layoutar med både rader og kolonnar.

Ei vanleg tilnærming er å bruke grid for det overordna sideoppsettet og flexbox for layout innanfor individuelle komponentar.

Nettlesarar har innebygde standardstilar som kan variere. For å sikre konsistent utsjånad på tvers av nettlesarar, startar mange utviklarar med ein 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 margar og polstring, set border-box som standard, og definerer ein god grunnstil.

📝Oppgave 4.3.1

Kva er den tilrådde metoden for å inkludere CSS i ei nettside?

📝Oppgave 4.3.2

Kva for CSS-selektor vel alle element med klassen "fremhevet"?

📝Oppgave 4.3.3

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

📝Oppgave 4.3.4

Kva for CSS-eigenskap vert brukt for å sentrere flex-element horisontalt i ein flex-container med standard flex-direction: row?

📝Oppgave 4.3.5

Skriv CSS som lagar ein navigasjonsmeny med følgjande krav:
- Mørk bakgrunnsfarge (t.d. #2c3e50)
- Kvit tekstfarge
- Elementa skal visast horisontalt med flexbox
- Lik avstand mellom alle lenkjene
- Lenkjene skal ikkje ha understreking
- Når musepekaren vert halden over ei lenkje, skal bakgrunnsfargen endre seg

Skriv òg HTML-strukturen for menyen med minst fire lenkjer.

📝Oppgave 4.3.6

Lag CSS for eit responsivt kortrutenett med CSS Grid. Krava er:
- Korta skal automatisk tilpasse seg skjermbreidda
- Minimum breidd per kort: 250px
- Avstand mellom korta: 1.5rem
- Kvart kort skal ha kvit bakgrunn, avrunda hjørne, padding og ein subtil skugge
- Skriv òg HTML-strukturen med minst fire kort

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

📝Oppgave 4.3.7

Tre CSS-reglar gjeld for det same <p>-elementet:

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

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

Kva for farge vert teksten vist i?

Oppsummering

I dette kapittelet har du lært:

- CSS: stilspraaket som styrer presentasjonen av HTML.
- Selektorar: angjev kva for element ein regel gjeld for.
- Boksmodellen: content, padding, border og margin.
- Flexbox og grid: moderne layout-teknikkar.
- Skilje innhald og stil: HTML for struktur, CSS for utsjånad.

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.