CSS — ako stránka vyzerá

Povedať stránke, ako má vyzerať — jedno CSS pravidlo, farba, písmo, rámček a vycentrovanie.

18. 9. 2026

CSS pravidlo

Stránka, ktorú si minule založil, je čierna na bielom. Nie preto, že by si niečo pokazil — prehliadač len nemá odkiaľ vedieť, ako ju chceš mať. Kým mu to nepovieš, drží sa svojich predvolených hodnôt.

Povie sa mu to jazykom CSS. HTML hovorí, čo na stránke je. CSS hovorí, ako to vyzerá. Sú to dva samostatné jazyky a v jednom súbore vedľa seba.

Celé CSS stojí na jednom tvare, ktorý sa opakuje donekonečna:

h1 {
  color: red;
}

Má tri časti a každá má meno, ktoré budeme používať celý rok:

• h1 je selektor — čoho sa pravidlo týka. Tu všetkých hlavných nadpisov na stránke.
• color je vlastnosť — čo na nich meníš.
• red je hodnota — na čo to nastavíš.

Za hodnotou je bodkočiarka. Keď ju vynecháš, prehliadač neohlási chybu — len ticho preskočí ten riadok aj ten nasledujúci. Toto je najčastejší dôvod, prečo sa „CSS nič nerobí”.

Nižšie je hotová stránka aj s pravidlami. Zmeň v nich hodnoty a pozeraj sa vpravo. Nič nepokazíš, tlačidlo Vrátiť pôvodné to vráti späť.

Kam sa CSS píše

Sú tri miesta a na prvý pohľad robia to isté. Nerobia.

Tú tretiu značku už poznáš — <link> bola v kvíze minulú hodinu ako tá, ktorá k stránke pripája súbor a sama na nej nie je vidieť. Presne toto je jej práca.

V editore na tejto stránke je <style> dole pod textom, aby si ho mal po ruke. Vo svojom index.html na GitHube ho daj do <head>, teda medzi <head> a </head> — patrí tam, lebo je to informácia o stránke, nie jej obsah:

<head>
  <meta charset="utf-8">
  <title>Názov tvojej stránky</title>

  <style>
    h1 {
      color: red;
    }
  </style>
</head>

Farba

Farby sú dve a pletú sa najčastejšie zo všetkého:

• color je farba textu, teda samotných písmen.
• background-color je farba plochy za nimi.

Keď ich nastavíš na body, platia na celú stránku — všetko vnútri ich zdedí, kým to niektoré neskoršie pravidlo neprepíše.

Hodnotu vieš napísať dvoma spôsobmi. Anglickým názvom (red, black, darkblue, whitesmoke) alebo kódom so #, kde sú tri dvojice pre červenú, zelenú a modrú — #ff6f1e je tá oranžová z minulej hodiny. Názvov je asi stopäťdesiat, kódom vieš namiešať čokoľvek.

Sprav v editore dve veci: daj celej stránke inú farbu plochy a odsekom inú farbu textu.

Písmo a jeho veľkosť

Dve vlastnosti, ktoré spravia najväčší rozdiel za najmenej práce. Obe daj na body, nech platia na celú stránku.

body {
  font-family: Arial, sans-serif;
  font-size: 18px;
}

font-family je názov písma. Píše sa doň viac možností oddelených čiarkou: prehliadač skúsi prvú, a ak ju na tom počítači nenájde, ide na ďalšiu. Posledná je vždy všeobecná skupina — sans-serif (bezpätkové, ako Arial) alebo serif (pätkové, ako Times). Bez nej ti na cudzom počítači môže vyjsť hocičo.

font-size je veľkosť v pixeloch. Predvolená je 16px. Na čítanie dlhšieho textu je 18px až 20px príjemnejšie — vyskúšaj si to na vlastnej stránke a rozhodni sa sám.

Trieda, id a <div>

Pravidlo p { color: gray; } trafí všetky odseky na stránke. To je zvyčajne to, čo chceš. Občas ale chceš osloviť jednu jedinú vec — ten rámček s kontaktom, tú jednu kartu.

Trieda — meno, ktoré sa smie opakovať

Na to si značke vymyslíš meno cez atribút class:

<div class="karta">
  <p>Kontakt</p>
  <p>meno@skola.sk</p>
</div>

A v CSS sa naň odkážeš s bodkou na začiatku:

.karta {
  color: darkblue;
}

Bodka je celý rozdiel. karta bez bodky by znamenalo značku <karta>, ktorá neexistuje, a pravidlo by sa ticho nepoužilo. V HTML bez bodky, v CSS s bodkou.

Id — meno pre jednu jedinú vec

Druhý spôsob, ako si značku pomenovať, je atribút id. Robí to isté, len sa v CSS píše s mriežkou namiesto bodky:

<div id="kontakt">
  <p>meno@skola.sk</p>
</div>

#kontakt {
  border: 1px solid black;
}

Rozdiel je v jednom pravidle: to isté id smie byť na stránke len raz. Trieda sa opakovať môže, koľkokrát chceš — a práve preto sa používa oveľa častejšie.

Ktoré kedy

Pravidlo, ktoré ti vydrží celý rok: na vzhľad používaj triedu. Aj vtedy, keď je tá vec na stránke zatiaľ jediná — o dva týždne pribudne druhá a s triedou nemusíš prepisovať nič.

Id si nechaj na to, na čo je naozaj dobré: pomenovať jedno konkrétne miesto, na ktoré sa dá odkázať. Odkaz, ktorý skočí na časť tej istej stránky, sa píše s mriežkou:

<a href="#kontakt">Kontakt</a>

<div id="kontakt">
  <p>meno@skola.sk</p>
</div>

Klikneš naň a stránka sa posunie dole na ten <div>. Nenačíta sa nič nové — preto to na dlhej stránke funguje okamžite. Presne takto je urobený zoznam V tejto hodine úplne hore na tejto stránke.

Neskôr, pri JavaScripte, bude id aj spôsob, ako jednu konkrétnu vec na stránke nájsť a zmeniť. Zatiaľ ti stačí vedieť, že existuje a v čom sa líši.

Načo to celé bolo s <div>

A tu konečne dostáva zmysel <div>, ktorý si minule pridal a nič nespravil. Sám osebe naozaj nič nerobí — je to obal. Ale keď mu dáš triedu, máš zrazu jednu vec, ktorú vieš osloviť a nastaviť jej, ako má vyzerať. To je celý jeho zmysel.

Daj v editore triede karta inú farbu textu — a všimni si, že prvý odsek nad ňou ostane taký, aký bol.

Rámček, odsadenie a okraj

Tri vlastnosti, ktoré z karty spravia kartu. Vyskúšaš si ich hneď v ďalšej časti, najprv ich treba vedieť rozoznať:

.karta {
  border: 1px solid black;
  padding: 12px;
  margin: 20px;
}

border je rámček. Má tri hodnoty za sebou: hrúbku, druh čiary (solid je plná, dashed prerušovaná) a farbu.

padding je odsadenie — priestor vnútri rámčeka, medzi čiarou a textom. Keď text lipne na rámčeku, chýba práve toto.

margin je okraj — priestor zvonku, medzi rámčekom a tým, čo je vedľa neho.

Pomôcka, ktorá stačí na celý rok: odsadenie je vnútri, okraj je zvonku. Keby si ich pomýlil, uvidíš to okamžite — text sa buď prilepí na čiaru, alebo sa rámček prilepí na susedov.

Vycentrovanie

Sú dve vycentrovania a robia dve rôzne veci:

• text-align: center posunie doprostred text vnútri prvku. Samotný rámček ostane, kde bol.
• margin: 0 auto posunie doprostred samotný prvok. Hodnota auto znamená „prehliadač, rozdeľ voľné miesto po oboch stranách rovnako”.

A tu je háčik, ktorý stojí každého aspoň desať minút: auto nemá čo rozdeliť, kým prvok nemá šírku. <div> je predvolene široký cez celú stránku, takže voľné miesto okolo neho je nulové a nič sa nepohne. Daj mu najprv width a potom auto.

Karta v editore už rámček aj odsadenie má. Dostaň ju do stredu stránky.

Úloha: vyfarbi svoju stránku

Vraciaš sa k tej istej stránke, ktorú si si minule založil — repozitár tiu-stranka, súbor index.html. Nezakladaj nový.

Celé to ide cez web GitHubu, nič sa neinštaluje:

1. Otvor svoj repozitár a klikni na index.html.
2. Vpravo hore ceruzka Edit this file.
3. Doplň do <head> značku <style> a do nej svoje pravidlá.
4. Úplne dole zelené Commit changes.

Termín: polnoc pred ďalšou hodinou. Za úlohu je 0 / 0,5 / 1 bod.

Čo na stránke musí byť

• <style> je v <head>, nie v <body>
• stránka má inú farbu plochy ako bielu — body { background-color: … }
• nadpis <h1> má inú farbu ako text okolo neho
• je nastavené písmo a jeho veľkosť — font-family a font-size na body
• na stránke je <div> s vlastnou triedou
• ten <div> má rámček a odsadenie
• a je vycentrovaný

Nemusí to byť pekné. Musí to byť tvoje a musíš vedieť ukázať, kde sa čo mení — to je presne prvá otázka pri obhajobe na konci roka.

Nabudúce

Tvoja stránka už vie, ako má vyzerať. Zatiaľ ju ale vidíš len ty — ako kód na GitHube.

Nabudúce dostane vlastnú adresu na internete, ktorú otvorí ktokoľvek, a každý svoju stránku ukáže ostatným.