Tvoje prvé CSS: stránka dostane farby

Spoznaj jazyk CSS a sleduj, ako tvoja webová stránka prestane vyzerať ako z roku 1995.

Ukážem ti: čo je CSS

HTML je kostra stránky. CSS je jej oblečenie: farby, písma, veľkosti, medzery. Píše sa v samostatnom súbore a vyzerá takto:

h1 {
  color: darkblue;
}

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

Prečítaj to nahlas takto: „Každý nadpis h1, obfarbi ho tmavomodro. Každý odstavec p, urob ho 18 pixelov a tmavosivý.”

Každé pravidlo má tri časti:

selektor (h1) – na čo sa pravidlo vzťahuje,
vlastnosť (color) – čo meníme,
hodnota (darkblue) – na čo to meníme.

Dvojbodka oddeľuje vlastnosť a hodnotu a každý riadok končí bodkočiarkou. Dávaj pozor na tie bodkočiarky – zabudnutá je najčastejšia chyba v CSS na svete.

Prepojenie: povedz stránke o svojom CSS

Vo svojom priečinku my-website vytvor nový súbor s názvom style.css.
Pridaj tento riadok do <head> každej tvojej HTML stránky:
```
<link rel="stylesheet" href="style.css">
```
Toto hovorí: „Vzhľad tejto stránky nájdeš v súbore style.css.”
Otestuj, že to funguje – daj do style.css niečo, čo nemožno prehliadnuť:
```
body {
  background-color: yellow;
}
```
Ulož, obnov stránku. Je všetko žlté? Funguje to! (Žltú farbu môžeš teraz zmazať.)

Farby v CSS

Farby môžeš písať ako anglické slová (red, darkblue, lightgray, tomato, gold…) alebo presnejšie ako kód začínajúci mriežkou: #1d4ed8 je modrá, #16a34a je zelená. Vymiešaj si akúkoľvek farbu na htmlcolorcodes.com.

Teraz ty 💪

Obleč svoju webovú stránku do prvých farieb. V style.css nastav:

farbu pozadia celej stránky (body),
farbu nadpisov (h1, h2),
veľkosť a farbu odstavcov (p).

Riešenia – samozrejme, farby si môžeš upraviť:

🏫 Webová stránka školy – riešenie

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

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

Modrá sa hodí na školský web – pôsobí dôveryhodne (preto ju používajú aj banky!).

🙋 Osobná webová stránka – riešenie

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

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

Osobná stránka môže byť odvážnejšia – teplá oranžová hovorí „toto miesto žije”.

🌍 Cestovný denník – riešenie

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

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

Zelená ako lesy a lúky – perfektné pre cestovný denník.

⚽ Webová stránka klubu – riešenie

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

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

Najlepšia voľba sú farby klubu – hráte v červenom? Tak červená!

⚠️

Pravidlo čitateľnosti: tmavý text na svetlom pozadí (alebo naopak). Svetložltá na bielom sa nedá čítať. Keď si nie si istý, opýtaj sa niekoho: „Dá sa to pohodlne čítať?”

✅

Skontroluj sa: Tvoja webová stránka má vlastné farby – a keďže CSS žije v jednom súbore prepojenom na každú stránku, všetky stránky sa obfarbili naraz. Celkom šikovné, však?

Čo si z tejto lekcie odnášaš

CSS = vzhľad. Píše sa do súboru style.css, prepája sa tagom <link> v <head>.
Pravidlo: selektor { vlastnosť: hodnota; } – a nezabudni na bodkočiarky.
Jeden CSS súbor oblečie celú webovú stránku naraz.