3.3 CSS: Styling og layout

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

Rød tekst

Eksternt stilark er best fordi det holder HTML og CSS adskilt og lar deg gjenbruke stilen på flere sider.

Flexbox og CSS Grid

Flexbox gjør det enkelt å fordele og justere elementer langs én akse:

``css
.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:

`css
.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.

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