Din første CSS: siden får farver

Vis mig: hvad CSS er

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

h1 {
  color: darkblue;
}

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

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

Hver regel har tre dele:

en selector (h1) – hvad reglen gælder for,
en property (color) – hvad vi ændrer,
en value (darkblue) – hvad vi ændrer det til.

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

Forbind det: fortæl din side om din CSS

Inde i din my-website-mappe, opret en ny fil kaldet style.css.
Tilføj 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 virker – put noget umuligt at overse i style.css:
```
body {
  background-color: yellow;
}
```
Gem det, opdater siden. Er det helt gult? Det virker! (Du må gerne slette det gule nu.)

Farver i CSS

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

Nu er det din tur 💪

Kle din hjemmeside i sine første farver. I style.css, sæt:

baggrundsfarven på hele siden (body),
farven på dine overskrifter (h1, h2),
størrelsen og farven på dine afsnit (p).

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

🏫 Skolehjemmeside – løsning

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

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

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

🙋 Personlig hjemmeside – løsning

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

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

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

🌍 Rejsejournal – 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.

⚽ Klubhjemmeside – løsning

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

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

Bedste valg er dine klubfarver – 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 ulæselig. Når du er i tvivl, spørg nogen: “Kan du læse dette komfortabelt?”

✅

Tjek dig selv: Din hjemmeside har sine egne farver – og fordi din CSS bor i én fil linket til hver side, fik alle dine sider farve på én gang. Ret smart, ikke?

Det tager du med fra denne lektion

CSS = udseendet. 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 hjemmeside på én gang.