CSS Tutoriál I. – Úvod do CSS

Vítejte v CSS Tutoriál, ve kterém se dozvíte základní věci o CSS, jeho pravidlech, zápisu a důležitých vlastností. V prvním díle se podíváme na základy, co to vlastně CSS je a jak ho použijeme.

CSS neboli Cascading Style Sheets je jazyk, kterým popisujeme styl zobrazení HTML (xHTML) dokumentů. Hlavním důvodem pro používání CSS a také důvodem jeho vytvoření je oddělení stylu dokumentu od hlavní části HTML dokumentu. Tím se udržuje kód čistší a přehlednější. Stylování pomocí HTML se tedy už nepoužívá a tagy pro něj vyhrazené jsou považovány za zastaralé. Pomocí CSS také můžeme jednoduše měnit styly zobrazení pro různá zařízení – rozdíly v mobilním zobrazení/běžném zobrazení. Další z výhod je možnost dynamicky měnit CSS styl nějakého objektu pomocí Javascriptu. Syntax většinou potom vypadá nějak takto: object.style.margin=“10px“

CSS stylesheet zapisujeme nejčastěji v nějakém HTML editoru a uložíme s příponou .css. Takto hotový soubor poté přidáme na stránky do hlavičky do tagu <link>. Příklad:

<head>
<link rel="stylesheet" type="text/css" href="muj_stylesheet.css">
</head>

Další možností jak na stránky přidat CSS kód je zápis stylu přímo na stránku do hlavičky. To už nám ovšem trochu znepřehledňuje kód, ale někdy je výhodné tuto metodu použít

<head>
<style type="text/css">
p {
color:red;
font-weight: bold;
}
</style>
</head>

Posledním způsobem jak dostat CSS styl na stránku je přímo zapsat kód u prvku, ke kterému ho vztahujeme pomocí atributu style

<p style="color: red; font-weight: bold;"></p>

Toto jsou základní informace o CSS, co to je, a jak ho dostaneme na stránky. V příštím díle něco více o jeho správném zápisu .

CSS Tutoriál I. – Úvod do CSS
19 října, 2013