Shrnutí: Znáte HTML (Hypertext Markup Language)? Kódovací jazyk, který slouží jako základ pro veškerý vývoj webu? Pokud se zajímáte o tvorbu webů, pak je HTML asi první věc, kterou se budete učit. Jeho bratr CSS je však těsně za ním.
HTML je totiž takový stavební kámen sochaře a CSS je socha, kterou z kamene vytvoří. Bez HTML by kám neexistoval a bez CSS by nevypadal jako socha.
Chystáte se tvořit web?
Co je to CSS? A jak souvisí s HMTL?
CSS znamená Cascading Style Sheets, česky kaskádové styly, či pouze “styly”. A zatímco HTML se používá ke strukturování webu (definování prvků, jako jsou nadpisy a odstavce, umožnění vkládání obrázků, videí a dalších médií), CSS určuje styl vašeho dokumentu – rozvržení stránky, barvy, písma a velikosti. Představte si HTML jako stavební základ a kostru domu (základy, výška stropu, počet místností, oken, atd.) a CSS jako designové prvky domu (barvy omítky, velikost oken, design interiéru, atd). Bez HTML by dům nestál a nebyl funkční a bez CSS by zase nevypadal hezky.
Jak funguje CSS?
CSS tedy dodává styl vašim webovým stránkám a dělá to interakcí s prvky z kódu HTML. Prvky jsou jednotlivé komponenty HTML webové stránky – například odstavec -, které v HTML mohou vypadat takto:
<p> Toto je můj odstavec! </p>
Ten se zobrazuje díky HTML. Pokud ale chcete, aby byl růžový a tučný, použili byste kód CSS, který vypadá takto:
p { color:pink; font-weight:bold; }
color:pink značí, že bude odstavec růžový a font-weight:bold značí tučné písmo.
V tomto případě se „p“ (odstavec) nazývá „selektor“ – jedná se o část kódu CSS určující, který prvek HTML bude stylem CSS ovlivněn. V CSS je selektor zapsán nalevo od první složené závorky. Informace mezi složenými závorkami se nazývá deklarace a obsahuje vlastnosti a hodnoty, které se aplikují na selektor. Vlastnosti jsou například velikost písma, barva a okraje, zatímco hodnoty jsou nastavení pro tyto vlastnosti. Ve výše uvedeném příkladu jsou „color“ a „font-weight“ vlastnosti a „pink“ a „bold“ jsou hodnoty. Dalí přílady jsou třeba
body { background-color:lightblue; }
. . .vytvoří pozadí vaší stránky světle modré, nebo. . .
p { font-size:20px; color:red; }
. . .vytvoří odstavec 20 bodového písma v červené barvě.
A tak bych mohla pokračovat.
Pokud vás zajímá váce příkladů, můžete se podívat třeba zde, nebo zde.
Shrnutí
p { color:pink; font-weight:bold; }
Externí, interní nebo vložené CSS?
Externí, interní nebo vložené CSS?
Možná by vás zajímalo, jak se ten CSS kód vlastně aplikuje do HTML. Stejně jako HTML je CSS napsán v jednoduchém prostém textu prostřednictvím textového editoru a existují tři hlavní způsoby, jak CSS přidat do kódu HTML. Kód CSS může být externí, interní nebo vložený.
Externí vložení CSS
Tímto kódem odkazujete na váš externě vytvoření soubor CSS, který se tak s vaším souborem .html propojí. Všechny pokyny CSS v tom externím souboru se poté aplikují na vaše stránky v souborech .html. Tento způsob je asi nejčistší způsob vkládání CSS do stránky webu, protože máte vše hezky přehledně na jednom místě a nestává se potom, že se vám bude nějaké CSS „bít“ s jiným CSS.
Interní vložení CSS
. . . na tuto jedinou stránku HTML bude nyní použita barva pozadí modrá a odstavce s 20 bodovým, středně modrým písmem. Pro všechny ostatní stránky platí CSS, které je globální (externí).
Vložené CSS
způsobí, že se tento konkrétní nadpis na této konkrétní stránce HTML zobrazí ve fialovém 40bodovém písmu.
Závěr
Obecně bych řekla, že externí šablony stylů jsou nejúčinnější a nejběžnější metodou implementace CSS do webu (je snazší sledovat a implementovat styl webu z externího souboru, než se matlat ve změti kódu), zatímco interní šablony stylů a vložený styl lze v případě použít pro případ, kdy je třeba provést individuální změny jednoho či několika málo prvků.
CSS dodá vaší stránce ten správný šmrnc, proto je podle mě fajn, používat CSS. V dnešní době, kdy se weby tvoří pomocí externích nástrojů, wordpressu a dalších, se už s CSS ani HTML zase tak moc nepotýkáme. Ale i když třeba CSS na první pohled nevidíte, na většině webových stránek ho najdete.
