Úvod do CSS

Vítejte v kurzu CSS! V kurzu HTML jste stavěli webové stránky a naučili jste se, že HTML popisuje, co na stránce je: nadpisy, odstavce, seznamy nebo obrázky. O to, jak stránka vypadá, se stará jiný jazyk: CSS. Pomocí CSS vybíráte barvy a písma, přidáváte pozadí a rámečky, nastavujete mezery mezi prvky a rozmisťujete je po stránce, například do sloupců.

CSS je zkratka pro Cascading Style Sheets, česky kaskádové styly:

• Style sheet (šablona stylů) je seznam pravidel, která popisují, jak má dokument vypadat, například „všechny nadpisy druhé úrovně jsou hnědé“. Souboru s kódem CSS se proto anglicky říká stylesheet, česky soubor se styly.
• Cascading (kaskádové) se týká toho, jak CSS rozhoduje, které pravidlo vyhraje, když stejný prvek stylují různá pravidla, třeba když podle jednoho má být nadpis hnědý a podle druhého modrý. Tomuto rozhodování se říká kaskáda a poznáte ji v příští lekci o selektorech.

Podívejte se do editoru vpravo. V souboru index.html je stránka o kočkách, kterou znáte z kurzu HTML. V náhledu je to zatím jen černý text na bílém pozadí, protože stránka nemá žádné styly. Ve druhém souboru, style.css, jsme pro ni styly připravili. Nevadí, že jim zatím nerozumíte: do konce kurzu se naučíte podobné styly napsat sami.

Aby prohlížeč styly použil, musí na ně stránka odkázat. K tomu slouží prvek link v hlavičce stránky, tedy v prvku head:

<link rel="stylesheet" href="style.css">

Atribut rel (z anglického relationship, vztah) říká, že připojený soubor obsahuje styly (anglicky stylesheet), a atribut href říká, který soubor to je. Stejně jako meta je link nepárový prvek, takže nemá zavírací tag. Podrobněji se na něj podíváme na konci této lekce.