Haló světe CSS

Když jsme probrali, co je CSS a proč ho používat, pravděpodobně se těšíte, až ho uvidíte v akci. Pokud čtete tento text ve svém webovém prohlížeči, pak už vidíte, jak CSS pracuje – od barev a velikostí záhlaví až po ukázková okna kódu, nabídky, seznamy a prakticky cokoli jiného. Pokud má stránka nebo její část pozadí, ohraničení, jinou velikost nebo barvu textu, pak je to velmi pravděpodobně díky CSS. Abychom lépe pochopili činnost CSS, musíme začít od základů.

Každý správný tutoriál začíná příkladem „Haló světe!“, jehož jediným cílem je ukázat nejjednodušší způsob, jak zobrazit text „Hello, world!“ na obrazovce uživatele. To lze se snadno dosáhnout v čistém HTML, bez použití CSS, proto přidáme jinou barvu:

<style type="text/css">
h1 {
	color: DeepSkyBlue;
}
</style>

<h1>Hello, world!</h1>

Právě jsme napsali náš první CSS příkaz, který se vztahuje na tag H1 a použili jsme ho ke změně barvy textu pomocí vlastnosti color a hodnoty barvy s názvem DeepSkyBlue. Výsledek si můžete ověřit vložením kódu do editoru nebo jednoduše kliknutím na tlačítko test nad ukázkou kódu.

Souhrn

Jak je vidět, je CSS poměrně jednoduchý jazyk. Pokud jste našemu prvnímu příkladu úplně nerozuměli, nemějte strach. V další kapitole si probereme, co výše uvedený kód CSS vlastně znamená a proč je napsán tak, jak je.