Lekce 3 — CSS: jak stránka vypadá

Webové aplikace · navazuje na lekci 2 (struktura HTML)

Minule jste postavili stránku, která má kostru: hlavičku, menu, hlavní obsah, patičku. Vypadá ale pořád jako dokument z roku 1995 — černý text na bílém, modré podtržené odkazy. Dnes se naučíte, jak prohlížeči říct, jak má stránka vypadat. Na to je CSS (Cascading Style Sheets, kaskádové styly).

Rozdělení práce je jednoduché a stojí za to si ho pamatovat:

• HTML říká, co to je — tohle je nadpis, tohle menu, tohle článek.
• CSS říká, jak to vypadá — nadpis je tmavě modrý, menu je v řádku, článek má rámeček.

Proto jste minule nevybírali nadpis podle velikosti. Velikost je věc CSS.

1. Jak vypadá CSS pravidlo

CSS se skládá z pravidel. Každé pravidlo říká „těmhle prvkům nastav tohle“:

h1 {
    color: darkblue;
    font-size: 40px;
}

Pravidel můžete mít za sebou kolik chcete a v každém kolik chcete deklarací. Komentář se v CSS píše /* takhle */ — žádné <!-- --> ani //.

2. Kam CSS napsat

Jsou tři možnosti. Budete je potkávat všechny, ale používat budete hlavně třetí.

a) Přímo ke značce atributem style:

<p style="color: red;">Červený odstavec.</p>

Funguje, ale jen pro ten jeden prvek. Deset červených odstavců = deset stejných atributů, a když se rozhodnete pro modrou, přepisujete deset míst. Hodí se na rychlé zkoušení, ne na web.

b) Do značky <style> v <head>:

<head>
    <meta charset="UTF-8">
    <title>Moje stránka</title>
    <style>
        p { color: red; }
    </style>
</head>

Lepší — platí pro celou stránku. Ale jen pro tuhle stránku. Web o pěti stránkách by měl pět kopií stylů.

c) Do samostatného souboru — tohle je správná cesta. Vedle index.html vytvořte soubor styl.css:

/* styl.css — tady žádné <style>, jen pravidla */
p {
    color: red;
}

a v HTML ho připojte značkou <link> v <head>:

<head>
    <meta charset="UTF-8">
    <title>Moje stránka</title>
    <link rel="stylesheet" href="styl.css">
</head>

Jeden soubor stylů, na který odkazují všechny stránky webu. Změníte barvu na jednom místě a změní se všude. A HTML zůstane čisté — jen obsah a struktura.

3. Selektory — koho stylujeme

Selektor vybírá, na které prvky pravidlo platí. Tady se vrací atributy class a id z minula:

.upozorneni {
    background-color: lightyellow;
    font-weight: bold;
}

nav a {
    color: white;
    text-decoration: none;   /* bez podtržení */
}

Rozdíl mezi nav a a nav, a je jedna čárka a úplně jiný význam: první jsou „odkazy v menu“, druhé „menu a k tomu všechny odkazy na stránce“. Čtěte selektory pozorně.

Prvek může mít víc tříd najednou, oddělených mezerou: <p class="upozorneni velke">. Platí na něj pak pravidla pro .upozorneni i pro .velke.

<p class=".upozorneni">    <!-- špatně: tečka v HTML -->
<p class="upozorneni">     <!-- správně -->

upozorneni { … }           /* špatně: hledá značku <upozorneni> */
.upozorneni { … }          /* správně */

4. Barvy, písmo, text

Vlastností jsou stovky. Na začátek vám stačí tyhle:

Barvy se dají zapsat několika způsoby:

color: red;                  /* jménem — asi 140 jmen, na zkoušení dobré */
color: #c0392b;              /* hex: červená, zelená, modrá, každá 00–ff */
color: rgb(192, 57, 43);     /* totéž desítkově, každá složka 0–255 */

V praxi uvidíte nejčastěji hex. Nemusíte ho umět číst z hlavy — ve VS Code se vedle barvy v CSS objeví čtvereček, a když na něj najedete, otevře se výběr barev.

Písmo se píše jako seznam záloh. Prohlížeč použije první, které má počítač nainstalované:

font-family: "Segoe UI", Arial, sans-serif;

Název s mezerou patří do uvozovek. Na konci má vždycky být obecná rodina — sans-serif (bezpatkové), serif (patkové) nebo monospace (strojopis) — ta existuje všude.

Jednotky velikosti, zatím stačí tři:

• px — pixely. Pevná velikost. Dobré na rámečky a drobné mezery.
• rem — násobek základní velikosti písma prohlížeče (obvykle 16 px, takže 2rem = 32 px). Dobré na písmo: když si člověk se slabším zrakem zvětší písmo v prohlížeči, stránka se přizpůsobí.
• % — procenta z rodiče. width: 50% = polovina šířky toho, v čem prvek je.

font-size: 20 px;    /* neplatí — prohlížeč to potichu zahodí */
font-size: 20px;     /* správně */
margin: 0;           /* nula jediná jednotku nepotřebuje */

5. Každý prvek je krabice

Tohle je nejdůležitější myšlenka celé lekce. Pro prohlížeč je každý prvek obdélník — nadpis, odstavec, odkaz, obrázek. A každý ten obdélník má čtyři vrstvy:

.karta {
    background-color: white;
    padding: 16px;                 /* text neleží na rámečku */
    border: 1px solid #cccccc;     /* tloušťka, styl, barva */
    border-radius: 8px;            /* zakulacené rohy */
    margin: 20px 0;                /* nahoře a dole 20px, vlevo a vpravo 0 */
}

margin a padding jdou zapsat zkráceně:

margin: 10px;                  /* všechny čtyři strany */
margin: 10px 20px;             /* nahoře+dole, vlevo+vpravo */
margin: 10px 20px 30px 40px;   /* nahoře, vpravo, dole, vlevo — po směru hodinových ručiček */
margin-top: 10px;              /* jen jedna strana: -top, -right, -bottom, -left */

Užitečný trik — vycentrovaný obsah. Text přes celou šířku širokého monitoru se špatně čte. Tohle ho omezí a posadí doprostřed:

main {
    max-width: 800px;     /* nejvýš 800px, na mobilu klidně méně */
    margin: 0 auto;       /* auto vlevo a vpravo = rozděl zbylé místo napůl */
}

Blokové a řádkové prvky. Pamatujete si <div> a <span> z minula? To byl právě tenhle rozdíl. Blokové prvky (div, p, h1, section, li…) začínají na novém řádku a roztáhnou se na celou šířku. Řádkové (span, a, strong…) teče s textem. Vlastnost display to umí přepnout — a tak se dělá menu v řádku:

nav ul {
    list-style: none;     /* pryč s odrážkami */
    padding: 0;
}

nav li {
    display: inline;      /* položky seznamu vedle sebe místo pod sebou */
    margin-right: 16px;
}

HTML zůstalo pořád stejné — sémantický seznam odkazů v <nav>. Změnil se jen vzhled. Přesně kvůli tomu jsme minule trvali na správné struktuře.

* { box-sizing: border-box; }   /* * = všechny prvky */

6. Když platí víc pravidel najednou — kaskáda

„Cascading“ v názvu CSS znamená, že na jeden prvek často míří víc pravidel a prohlížeč musí rozhodnout, které vyhraje. Stačí znát tři zásady:

1. Dědičnost. Některé vlastnosti — hlavně ty o textu (color, font-family, font-size, line-height) — se dědí z rodiče na všechno uvnitř. Proto stačí nastavit písmo jednou na body:

body {
    font-family: Arial, sans-serif;   /* zdědí všechno na stránce */
    color: #333333;
}

Vlastnosti o krabici (border, padding, margin, background-color) se nedědí. Kdyby se rámeček z <body> dědil, měl by ho každý odstavec.

2. Specifičtější selektor vyhraje. Čím přesněji selektor míří, tím má větší váhu: id > třída > značka.

p            { color: black; }
.upozorneni  { color: red; }     /* vyhraje nad p — třída je přesnější než značka */

<p class="upozorneni"> bude červený, i když pravidlo p by bylo napsané až pod ním.

3. Při shodě vyhraje to pozdější. Dvě pravidla se stejně přesným selektorem — platí to, které je v souboru níž:

h1 { color: blue; }
h1 { color: green; }   /* nadpis bude zelený */

7. Hledání chyb: Prozkoumat → Styles

Z minula znáte pravý klik → Prozkoumat (Inspect) a záložku Elements se stromem stránky. Když v něm kliknete na prvek, vpravo (nebo dole) uvidíte panel Styles. Je to nejlepší nástroj na CSS, jaký máte:

• Vidíte všechna pravidla, která na prvek míří, seřazená od vítěze dolů, i se jménem souboru a číslem řádku.
• Deklarace, která prohrála v kaskádě, je přeškrtnutá. Pravidlo výš ji přebilo.
• Deklarace, které prohlížeč nerozumí (překlep, špatná hodnota), je přeškrtnutá a má u sebe žlutý trojúhelník ⚠. Tohle je ta „potichu přeskočená“ chyba z kapitoly 1.
• Když pravidlo v seznamu vůbec není, selektor na prvek nemíří — překlep ve třídě, chybějící tečka, špatné zanoření.
• Hodnoty můžete přímo v panelu přepisovat a hned vidíte výsledek. Zkoušejte tam, a co funguje, přepište do souboru — změny v panelu se po obnovení stránky ztratí.

Úplně dole v panelu (nebo v záložce Computed) je navíc nakreslená krabice prvku s čísly — kolik má obsah, padding, border a margin. Najeďte myší na prvek ve stromu a prohlížeč tyhle vrstvy obarví přímo na stránce.

body {
    font-family: Arial, sans-serif     /* ← chybí středník */
    color: #333333;
}

8. Úkoly

Pracujte na své stránce z minulé lekce. HTML měňte jen tam, kde to úkol říká — o to právě jde.

<head>
    <meta charset="UTF-8">
    <title>Opravna kol</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Opravna kol U Řetězu</h1>
        <nav>
            <ul>
                <li><a href="#cenik">Ceník</a></li>
                <li><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <p class="upozorneni">V srpnu máme zavřeno.</p>
    </main>
    <footer>&copy; 2026 U Řetězu</footer>
</body>

body {
    font-family: Arial, sans-serif
    color: #333333;
}

.hlavicka {
    background-color: #1e3a5f;
    color: white;
    padding: 16px;
}

h1 {
    font-size: 32 px;
}

#upozorneni {
    background-color: #fff3cd;
    padding: 10px;

nav a {
    colour: white;
    text-decoration: none;
}

footer {
    text-align: centre;
}

Shrnutí — co byste měli umět říct vlastními slovy

• Co dělá HTML a co CSS — a proč nepatří vzhled do HTML.
• Z jakých částí se skládá CSS pravidlo.
• Tři způsoby, jak CSS připojit, a proč se používá samostatný soubor.
• Co vybere p, .karta, #o-mne, nav a a h1, h2.
• Rozdíl mezi margin a padding.
• Proč je <p class="upozorneni"> červený, i když pravidlo p { color: black; } je v souboru až pod .upozorneni.
• Jak v prohlížeči zjistit, proč se pravidlo neprojevilo.