Gi nettsider visuell form med CSS, inkludert farger, fonter, boksmodellen og moderne layoutteknikker.
CSS: Styling og layout
HTML gir nettsiden struktur, men det er CSS som bestemmer hvordan den ser ut. Med CSS kan du kontrollere farger, skrifttyper, størrelser, avstander og hele sidelayouten.
CSS-regler skrives i et eget stilark (.css-fil) eller direkte i HTML-dokumentet med <style>-elementet.
En CSS-regel består av en selektor og en deklarasjonsblokk:
h1 {
color: darkblue;
font-size: 2rem;
margin-bottom: 1rem;
}- Selektor (h1) – velger hvilke elementer regelen gjelder for
- Egenskap (color) – hva som skal endres
- Verdi (darkblue) – hva egenskapen settes til
Selektorer og kobling
CSS har flere typer selektorer for å velge elementer:
/* 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 finnes tre måter å koble CSS til HTML:
<!-- 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 holder HTML og CSS adskilt og lar deg gjenbruke stilen på flere sider.
┌─────────── margin ───────────┐
│ ┌──────── border ──────────┐ │
│ │ ┌────── padding ───────┐ │ │
│ │ │ │ │ │
│ │ │ innhold │ │ │
│ │ │ │ │ │
│ │ └──────────────────────┘ │ │
│ └──────────────────────────┘ │
└──────────────────────────────┘- Innhold – tekst, bilder osv.
- Padding – avstand mellom innhold og kantlinje
- Border – kantlinje rundt elementet
- Margin – avstand mellom elementet og andre elementer
Tips: Bruk box-sizing: border-box; slik at padding og border inkluderes i den angitte bredden.
Flexbox og CSS Grid
Flexbox gjør det enkelt å fordele og justere elementer langs én akse:
.container {
display: flex;
justify-content: space-between; /* fordeling langs hovedaksen */
align-items: center; /* justering langs kryssaksen */
gap: 1rem; /* avstand mellom elementer */
}Vanlige Flexbox-egenskaper:
- flex-direction: row (standard) eller column
- justify-content: flex-start, center, space-between, space-around
- align-items: flex-start, center, stretch
- flex-wrap: wrap lar elementer brytes til neste linje
CSS Grid er ideell for komplekse sidelayouter med rader og kolonner:
.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-enheten fordeler tilgjengelig plass proporsjonalt. 1fr 2fr 1fr gir den midterste kolonnen dobbelt så mye 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 skyver logoen til venstre og lenkene til høyre.
Oppsummering
- CSS kontrollerer utseendet til HTML-elementer gjennom regler med selektorer og egenskaper
- Selektorer velger elementer: element (p), klasse (.intro), ID (#header)
- Boksmodellen definerer innhold, padding, border og margin
- Bruk box-sizing: border-box for enklere størrelsesberegning
- Flexbox er ideell for endimensjonal layout (rad eller kolonne)
- CSS Grid er ideell for todimensjonal layout (rader og kolonner)
- Hold CSS i et 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.