Din första CSS: sidan får färger

Jag visar: vad CSS är

HTML är sidans skelett. CSS är dess kläder: färger, typsnitt, storlekar, avstånd. Det skrivs i en separat fil och ser ut så här:

h1 {
  color: darkblue;
}

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

Läs det högt så här: “Varje h1-rubrik, färga den mörkblå. Varje p-stycke, gör det 18 pixlar och mörkgrått.”

Varje regel har tre delar:

en selector (h1) – vad regeln gäller för,
en property (color) – vad vi ändrar,
ett value (darkblue) – vad vi ändrar det till.

Ett kolon skiljer property och value, och varje rad slutar med semikolon. Håll koll på semikolonerna – ett glömt är det vanligaste CSS-felet i världen.

Koppla ihop det: berätta för din sida om din CSS

Inuti din mapp my-website, skapa en ny fil som heter style.css.
Lägg till den här raden inuti <head> på varje en av dina HTML-sidor:
```
<link rel="stylesheet" href="style.css">
```
Det säger: “Du hittar den här sidans utseende i filen style.css.”
Testa att det funkar – lägg något omöjligt att missa i style.css:
```
body {
  background-color: yellow;
}
```
Spara, uppdatera sidan. Är allt gult? Det funkar! (Du får gärna ta bort det gula nu.)

Färger i CSS

Du kan skriva färger som engelska ord (red, darkblue, lightgray, tomato, gold…) eller mer exakt som en kod som börjar med fyrkant: #1d4ed8 är blått, #16a34a är grönt. Blanda vilken färgkod du vill på htmlcolorcodes.com.

Nu är det din tur 💪

Klä din webbplats i sina första färger. I style.css, sätt:

bakgrundsfärgen på hela sidan (body),
färgen på dina rubriker (h1, h2),
storleken och färgen på dina stycken (p).

Lösningar – känn dig fri att tweaka färgerna:

🏫 Skolwebbplats – lösning

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

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

Blått passar en skolwebbplats bra – det känns pålitligt (därför använder banker det också!).

🙋 Personlig webbplats – lösning

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

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

En personlig webbplats kan vara djärvare – varm orange säger “det här stället lever”.

🌍 Resejournal – lösning

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

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

Grönt som skogar och ängar – perfekt för en resejournal.

⚽ Klubbwebbplats – lösning

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

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

Bästa valet är dina klubbfärger – spelar ni i rött? Då blir det rött!

⚠️

Läsbarhetsregel: mörk text på ljus bakgrund (eller tvärtom). Ljusgult på vitt går inte att läsa. När du är osäker, fråga någon: “Kan du läsa det här bekvämt?”

✅

Kolla själv: Din webbplats har sina egna färger – och eftersom din CSS ligger i en fil som är länkad till varje sida, fick alla dina sidor färg på en gång. Ganska smart, eller hur?

Det här tar du med dig från lektionen

CSS = utseendet. Det skrivs i en style.css-fil, kopplas med en <link>-tagg i <head>.
Regeln: selector { property: value; } – och glöm inte semikolonerna.
En CSS-fil klär hela din webbplats på en gång.