Tvoj prvi CSS: stran dobi barve · Kodiraj z Martinom

Spoznaj jezik CSS in opazuj, kako tvoja spletna stran neha izgledati kot iz leta 1995.

Pokažem ti: kaj je CSS

HTML je okostje strani. CSS je njena oblačila: barve, pisave, velikosti, razmiki. Piše se v ločeni datoteki in izgleda tako:

h1 {
  color: darkblue;
}

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

Preberi na glas tako: “Vsak naslov h1, obarvaj ga temno modro. Vsak odstavek p, naj bo 18 slikovnih pik in temno siv.”

Vsako pravilo ima tri dele:

izbirnik (h1) – na kaj se pravilo nanaša,
lastnost (color) – kaj spreminjamo,
vrednost (darkblue) – v kaj to spreminjamo.

Med lastnostjo in vrednostjo je dvopičje, vsaka vrstica se konča s podpičjem. Pazljivo na ta podpičja – pozabljeno podpičje je najpogostejša napaka v CSS na svetu.

Povezava: povej strani o svojem CSS

V mapi my-website ustvari novo datoteko style.css.
V <head> vsake svoje HTML strani dodaj to vrstico:
```
<link rel="stylesheet" href="style.css">
```
To pove: “Videz te strani najdeš v datoteki style.css.”
Preveri, da deluje – v style.css vpiši nekaj, česar ne moreš spregledati:
```
body {
  background-color: yellow;
}
```
Shrani, osveži stran. Je vse rumeno? Deluje! (Rumeno lahko zdaj izbrišeš.)

Barve v CSS

Barve lahko pišeš z angleškimi besedami (red, darkblue, lightgray, tomato, gold…) ali natančneje s kodo, ki se začne z lojtro: #1d4ed8 je modra, #16a34a je zelena. Katero koli barvo si izmisli na htmlcolorcodes.com.

Zdaj si na vrsti 💪

Obleci svojo spletno stran v prve barve. V style.css nastavi:

barvo ozadja celotne strani (body),
barvo naslovov (h1, h2),
velikost in barvo odstavkov (p).

Rešitve – seveda lahko barve prilagodiš:

🏫 Šolska spletna stran – rešitev

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

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

Modra dobro pristaja šolski spletni strani – deluje zaupanja vredno (zato jo uporabljajo tudi banke!).

🙋 Osebna spletna stran – rešitev

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

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

Osebna spletna stran lahko bolj drzna – topla oranžna pove “tukaj je živahno”.

🌍 Potopisni dnevnik – rešitev

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

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

Zelena kot gozdovi in travniki – popolna za potopisni dnevnik.

⚽ Klubska spletna stran – rešitev

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

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

Najboljša izbira so barve tvojega kluba – igraš v rdečem? Potem rdeče!

⚠️

Pravilo berljivosti: temno besedilo na svetlem ozadju (ali obratno). Svetlo rumeno na belem je neberljivo. Ko nisi prepričan, vprašaj nekoga: “Ali lahko to udobno prebereš?”

✅

Preveri se: Tvoja spletna stran ima svoje barve – in ker tvoj CSS živi v eni datoteki, povezani na vsako stran, so se obarvale vse strani hkrati. Precej pametno, kajne?

Kaj si vzameš iz te lekcije

CSS = videz. Piše se v datoteki style.css, poveže se z oznako <link> v <head>.
Pravilo: izbirnik { lastnost: vrednost; } – in ne pozabi podpičij.
Ena datoteka CSS oblači celotno spletno stran hkrati.