Gi nettsider visuell form med CSS, inkludert farger, fonter, boksmodellen og moderne layoutteknikker.
CSS: Styling og layout
HTML gir nettsida struktur, men det er CSS som avgjer korleis ho ser ut. Med CSS kan du kontrollere fargar, skrifttypar, storleikar, avstandar og heile sidelayouten.
CSS-reglar blir skrivne i eit eige stilark (.css-fil) eller direkte i HTML-dokumentet med <style>-elementet.
Ein CSS-regel består av ein selektor og ein deklarasjonsblokk:
h1 {
color: darkblue;
font-size: 2rem;
margin-bottom: 1rem;
}- Selektor (h1) – vel kva element regelen gjeld for
- Eigenskap (color) – kva som skal endrast
- Verdi (darkblue) – kva eigenskapen blir sett til
Selektorar og kopling
CSS har fleire typar selektorar for å velje element:
/* Element-selektor – alle <p>-elementer */
p { color: #333; }
/* Klasse-selektor – elementer med class="intro" */
.intro { font-weight: bold; }
/* ID-selektor – elementet med id="header" */
#header { background-color: navy; }
/* Kombinasjoner */
nav a { text-decoration: none; } /* <a> inne i <nav> */
h2 + p { font-size: 1.1rem; } /* <p> rett etter <h2> */
.kort:hover { transform: scale(1.05); } /* ved musepeker */Det finst tre måtar å kople CSS til HTML på:
<!-- 1. Eksternt stilark (anbefalt) -->
<link rel="stylesheet" href="stil.css">
<!-- 2. Internt stilark -->
<style>
body { font-family: Arial, sans-serif; }
</style>
<!-- 3. Inline-stil (unngå) -->
<p style="color: red;">Rød tekst</p>Eksternt stilark er best fordi det held HTML og CSS skilde og lèt deg gjenbruke stilen på fleire sider.
┌─────────── margin ───────────┐
│ ┌──────── border ──────────┐ │
│ │ ┌────── padding ───────┐ │ │
│ │ │ │ │ │
│ │ │ innhold │ │ │
│ │ │ │ │ │
│ │ └──────────────────────┘ │ │
│ └──────────────────────────┘ │
└──────────────────────────────┘- Innhald – tekst, bilete osv.
- Padding – avstand mellom innhald og kantlinje
- Border – kantlinje rundt elementet
- Margin – avstand mellom elementet og andre element
Tips: Bruk box-sizing: border-box; slik at padding og border blir inkluderte i den oppgitte breidda.
Flexbox og CSS Grid
Flexbox gjer det enkelt å fordele og justere element langs éin akse:
.container {
display: flex;
justify-content: space-between; /* fordeling langs hovedaksen */
align-items: center; /* justering langs kryssaksen */
gap: 1rem; /* avstand mellom elementer */
}Vanlege Flexbox-eigenskapar:
- flex-direction: row (standard) eller column
- justify-content: flex-start, center, space-between, space-around
- align-items: flex-start, center, stretch
- flex-wrap: wrap lèt element brytast til neste linje
CSS Grid er ideell for komplekse sidelayoutar med rader og kolonnar:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* tre kolonner */
grid-template-rows: auto 1fr auto; /* tre rader */
gap: 1rem;
}
.header { grid-column: 1 / -1; } /* strekker over alle kolonner */
.sidebar { grid-row: 2 / 3; }
.main { grid-column: 2 / 3; }fr-eininga fordeler tilgjengeleg plass proporsjonalt. 1fr 2fr 1fr gir den midtarste kolonnen dobbelt så mykje plass.
HTML:
<nav class="navbar">
<a href="/" class="logo">MinSide</a>
<ul class="nav-links">
<li><a href="#hjem">Hjem</a></li>
<li><a href="#om">Om</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>CSS:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #1a1a2e;
}
.logo {
color: white;
font-size: 1.5rem;
text-decoration: none;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-links a {
color: #e0e0e0;
text-decoration: none;
}
.nav-links a:hover {
color: #00d4ff;
}Flexbox med justify-content: space-between skyv logoen til venstre og lenkjene til høgre.
Oppsummering
- CSS kontrollerer utsjånaden til HTML-element gjennom reglar med selektorar og eigenskapar
- Selektorar vel element: element (p), klasse (.intro), ID (#header)
- Boksmodellen definerer innhald, padding, border og margin
- Bruk box-sizing: border-box for enklare storleiksberekning
- Flexbox er ideell for eindimensjonal layout (rad eller kolonne)
- CSS Grid er ideell for todimensjonal layout (rader og kolonnar)
- Hald CSS i eit eksternt stilark for oversikt og gjenbruk
Oppgaver
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.