Din første CSS: siden får farger

Jeg viser deg: hva CSS er

HTML er sidens skjelett. CSS er dens tøj: farger, skrifttyper, størrelser, afstande. Det skrives i en separat fil og ser sådan ud:

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

Les det højt sådan her: “Hver h1-overskrift, farv den mørkeblå. Hvert p-avsnitt, gjør det 18 pixels og mørkegråt.”

Hver regel har tre dele:

en selector (h1) – hvad reglen gjelder for,
en property (color) – hvad vi endrer,
en value (darkblue) – hvad vi endrer det til.

Et kolon adskiller property og value, og hver linje slutter med et semikolon. Pas på disse semikoloner – et glemt er den mest vanlige CSS-feil i verden.

Forbind det: fortell siden din om din CSS

Inde i din my-website-mappe, lag en ny fil kalt style.css.
Legg til denne linje inde i <head> på hver af dine HTML-sider:
```
<link rel="stylesheet" href="style.css">
```
Det siger: “Du finder denne sides udseende i filen style.css.”
Test at det fungerer – put noe umuligt at overse i style.css:
```
body {
  background-color: yellow;
}
```
Lagre det, oppdater siden. Er det helt gult? Det fungerer! (Du må gerne slette det gule nu.)

Farger i CSS

Du kan skrive farger som engelske ord (red, darkblue, lightgray, tomato, gold…) eller mere nøyaktigt som en kode der starter med et hash-tegn: #1d4ed8 er blå, #16a34a er grøn. Bland hver fargekode du kan lide på htmlcolorcodes.com.

Nå er det din tur 💪

Kle din nettside i sine første farger. I style.css, sett:

baggrundsfargen på hele siden (body),
fargen på dine overskrifter (h1, h2),
størrelsen og fargen på dine avsnitt (p).

Løsninger – du må selvfølgelig gerne justere fargerne:

🏫 Skolenettside – løsning

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Blå passer godt til en skolenettside – det føles troværdigt (derfor bruker banker det også!).

🙋 Personlig nettside – løsning

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

En personlig nettside kan være modigere – varm orange siger “dette sted er levende”.

🌍 Reisejournal – løsning

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Grøn som skove og enge – perfekt til en rejsejournal.

⚽ Klubnettside – løsning

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Bedste valg er dine klubfarger – spiller I i rødt? Så er det rødt!

⚠️

Læsbarhedsregel: mørk tekst på lys baggrund (eller omvendt). Lys gul på hvid er uleselig. Når du er i tvivl, spørg nogen: “Kan du lese dette komfortabelt?”

✅

Sjekk deg selv: Din nettside har sine egne farger – og fordi din CSS bor i én fil linket til hver side, fik alle dine sider farge på én gang. Ret smart, ikke?

Dette tar du med deg fra leksjonen

CSS = utseendet. Det skrives i en style.css-fil, forbundet med et <link>-tag i <head>.
Reglen: selector { property: value; } – og glem ikke semikolonerne.
Én CSS-fil klæder hele din nettside på én gang.