HTML a CSS pro začátečníky za 15 minut

Tenhle díl navazuje na návod Jak vytvořit první webovou stránku v HTML. Pokud jste ho ještě neprošli, začněte tam – budeme totiž stylovat přesně tu stránku, kterou jste si v něm vytvořili. Máte-li ji hotovou, jdeme na to.

Nejdřív rychlé připomenutí

Web stojí na dvou jazycích, které se skvěle doplňují:

• HTML je kostra – říká, co na stránce je (nadpis, odstavec, obrázek).
• CSS je oblečení – říká, jak to vypadá (barvy, písmo, rozložení, mezery).

Samotné HTML vypadá jako holý text z Wordu. Teprve s CSS z toho je pěkný web. A dobrá zpráva: CSS je pro začátek mnohem jednodušší, než to vypadá.

Krok 1: Vytvořte soubor pro styl

Vedle svého index.html vytvořte v textovém editoru nový prázdný soubor a uložte ho jako style.css. Do tohohle souboru budeme psát všechen vzhled. HTML tak zůstane čisté – co je zvlášť, jak to vypadá zvlášť.

Krok 2: Propojte HTML a CSS

Aby prohlížeč věděl, že má k vaší stránce načíst i styl, přidejte do <head> souboru index.html jeden jediný řádek:

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

A to je celé to „spojení". Od téhle chvíle jsou HTML a CSS propojené – cokoli napíšete do style.css, projeví se na stránce. HTML se už nemusíte dotýkat.

Krok 3: Jak vypadá jedno CSS pravidlo

Celé CSS se skládá z jednoduchých „pravidel". Každé má vždycky stejnou stavbu:

selektor {
  vlastnost: hodnota;
}

Řekněme, že chceme mít hlavní nadpis modrý. Napíšeme:

h1 {
  color: #005bb5;
}

Přečteno lidsky: „vezmi všechny nadpisy h1 a nastav jim barvu textu na tenhle odstín modré." Zapamatujte si tři části:

• selektor (h1) – co chcete upravit,
• vlastnost (color) – kterou věc měníte,
• hodnota (#005bb5) – jak má vypadat.

Krok 4: Vlastnosti, které použijete nejčastěji

Nemusíte umět stovky vlastností. Pro pěkný začátek stačí tahle hrstka:

• color – barva textu
• background-color – barva pozadí
• font-size – velikost písma (např. 18px)
• font-family – druh písma (např. Arial, sans-serif)
• text-align – zarovnání textu (left, center, right)
• padding – mezera uvnitř prvku
• margin – mezera kolem prvku

Barvu můžete zapsat i slovem (blue, red), ale #005bb5 je tzv. HEX kód – přesný odstín. Vlastní si vygenerujete v každém obrázkovém editoru nebo online.

Krok 5: Obarvíme naši stránku

Teď to spojíme dohromady. Do souboru style.css vložte tenhle kód:

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

h1 {
  color: #005bb5;
  text-align: center;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

Uložte oba soubory a v prohlížeči dejte obnovit (F5). Vaše dřív holá stránka má najednou světle modré pozadí, hezčí písmo, vycentrovaný modrý nadpis a čitelnější odstavce. A to jste napsali jen pár řádků!

Krok 6: Když chci upravit jen jeden prvek (třídy)

Zápis p { ... } obarví všechny odstavce. Co když chci jinak vypadající jen jeden? Od toho jsou třídy. V HTML prvku přidáte class:

<p class="dulezite">Tohle je důležitý text.</p>

A v CSS se na tu třídu odkážete tečkou před názvem:

.dulezite {
  color: #b91c1c;
  font-weight: bold;
}

Stejnou třídu můžete dát libovolnému počtu prvků – všechny pak budou vypadat stejně. Přesně takhle se staví reálné weby: pár tříd, které se opakují.

Proč se tomu říká „kaskádové" styly

To „C" v názvu CSS znamená Cascading, tedy kaskádové. Znamená to, že když si dvě pravidla odporují, vyhrává to pozdější (níž v souboru) nebo to konkrétnější (třída přebije obecný p). Nemusíte to teď řešit do hloubky – jen vězte, že když se něco „nechce obarvit", nejspíš to přebíjí jiné pravidlo.

Časté chyby začátečníků

Když CSS nefunguje, v drtivé většině případů za to může jedna z těchhle drobností:

• Zapomenutý středník. Každá vlastnost musí končit ;. Bez něj přestane fungovat i řádek pod ním.
• Chybějící složená závorka }. Když ji vynecháte, „rozbije se" celý zbytek souboru pod ní.
• Špatná cesta k souboru. <link href="style.css"> zabere, jen když je style.css ve stejné složce a název sedí přesně – včetně velkých a malých písmen.
• Chybějící jednotka. font-size: 18 nefunguje, musí být font-size: 18px.
• Překlep ve vlastnosti. Neexistuje colour ani font-color – barva textu je vždy color.
• Prohozená tečka u třídy. V CSS se píše .dulezite (s tečkou), v HTML class="dulezite" (bez tečky).
• Změna se neukázala. Nejspíš drží prohlížeč starou verzi – dejte tvrdé obnovení: Ctrl+F5 (na Macu Cmd+Shift+R).

Nejčastější je ten středník. Všimněte si, že vlevo chybí za color – a shodí to i řádek pod ním:

/* ❌ Špatně – chybí středník za color */
h1 {
  color: #005bb5
  font-size: 30px;
}

/* ✅ Správně */
h1 {
  color: #005bb5;
  font-size: 30px;
}

A takhle může vypadat kompletní jednoduchá stránka

Na závěr to spojíme dohromady. Tady je celá malá stránka v jednom souboru – vlevo kód, vpravo jak vypadá v prohlížeči. Pro jednoduchost je styl rovnou v <head> uvnitř <style> (ve větším projektu byste ho dali do style.css, jak jsme si ukázali). Klidně si ji zkopírujte do souboru index.html a hrajte si:

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <title>Moje stránka</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f6ff;
      color: #333;
      max-width: 600px;
      margin: 40px auto;
      padding: 0 20px;
    }
    h1 { color: #005bb5; }
    .box {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 16px rgba(0,0,0,.08);
    }
    .btn {
      display: inline-block;
      background: #005bb5;
      color: #fff;
      text-decoration: none;
      padding: 10px 22px;
      border-radius: 50px;
    }
  </style>
</head>
<body>
  <h1>Ahoj, já jsem Jan</h1>
  <div class="box">
    <p>Vítejte na mé první stránce.
       Vytvořil jsem ji sám v HTML a CSS.</p>
    <a class="btn" href="#">Napište mi</a>
  </div>
</body>
</html>

Kde musí soubory být – a jak web dostat na internet

Všimli jste si, že v <link href="style.css"> není žádná cesta, jen název souboru? Tím prohlížeči říkáte: „hledej style.css vedle mě, ve stejné složce". Proto musí být index.html a style.css pohromadě. Kdybyste styl přesunuli jinam, prohlížeč ho nenajde a stránka se zobrazí holá, bez designu. Úplně stejně to platí pro obrázky (<img src="foto.jpg">).

📁 muj-web/
├── index.html
└── style.css

Co je webhosting

Váš web zatím leží jen ve vašem počítači – vidíte ho jen vy. Aby na něj mohl kdokoliv na světě, musí být uložený na počítači, který je pořád zapnutý a připojený k internetu; tomu se říká server. Pronájem místa na takovém serveru je webhosting. Poskytují ho firmy (v Česku třeba Wedos nebo Forpsi) a platí se zpravidla jednou ročně. Aby vás na internetu lidé našli, potřebujete k hostingu ještě doménu – o té je řeč hned v další části.

Co je doména (a jak zjistit, která je volná)

Doména je adresa vašeho webu – to, co lidé píšou do prohlížeče, například osteigl.cz. Je to vlastně jméno, pod kterým vás na internetu najdou. Doménu si u hostingové firmy jednou ročně pronajmete (u koncovky .cz to bývají řádově stovky korun za rok).

Háček je v tom, že každá doména existuje na světě jen jednou. Spousta hezkých a krátkých názvů je proto už dávno zabraná – někdo si je zaregistroval dřív. Když je název obsazený, musíte zvolit jiný.

Jak zjistit, jestli je volná? Na webu kteréhokoliv registrátora (např. Wedos nebo Forpsi) je vyhledávací políčko: napíšete do něj vysněný název a systém hned ukáže „volná / obsazená" a rovnou nabídne i alternativy s jinou koncovkou (.eu, .com, .shop …). Dostupnost .cz domén spravuje centrální registr CZ.NIC (nic.cz), kde se volnost dá ověřit také.

Co je FTP

Když máte web hotový u sebe v počítači, musíte soubory na ten server nějak dostat. K tomu slouží FTP (File Transfer Protocol) – zjednodušeně „přenos souborů" mezi vaším počítačem a webhostingem. Používá se k tomu program (tzv. FTP klient), například zdarma dostupná FileZilla: zadáte do něj přihlašovací údaje, které dostanete od hostingu, a soubory jednoduše přetáhnete myší nahoru na server.

Pozor: stejná složka platí i na serveru

A tady je věc, na kterou začátečníci často narazí: na hostingu musí zůstat úplně stejná struktura jako u vás v počítači. Když máte index.html a style.css ve stejné složce doma, musí být ve stejné složce i na serveru (soubory se obvykle nahrávají do složky www nebo public_html). Když každý soubor nahrajete jinam, stránka se online zase zobrazí bez stylu – přesně jako když je rozdělíte doma.

Co dál?

Umíte teď to nejdůležitější: propojit HTML se stylem, napsat pravidlo a používat třídy. To je základ, na kterém stojí každý web. Nejlepší, co teď můžete udělat, je hrát si – měňte hodnoty, přidávejte vlastnosti a dívejte se, co se stane. Nic nerozbijete.