Search
Close this search box.

Co je to CSS – kaskádové styly

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?

A víte jak to udělat i bez použití kódu/programování?
Je to opravdu jednoduché: stačí využít nějaký nástroj na tvorbu 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;  }

p = selektor (konkrétně prek odstavec)
color:pink = značí že selektor (odstavec) bude mít růžovou barvu
font-weight: bold = značí, že selektor (odstavec) bude tučným písmem

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

Externí šablony stylů se ukládají zvlášť jako soubory CSS a lze je použít k určení vzhledu celého webu prostřednictvím jednoho souboru (místo přidání jednotlivých instancí kódu CSS ke každému prvku HTML, který chcete upravit). Chcete-li použít externí šablonu stylů, musí vaše soubory .html obsahovat sekci záhlaví, která odkazuje na externí šablonu stylů a vypadá nějak takto:
<head> 
<link rel = ”stylesheet” type = ”text / css” href = mysitestyle.css ”> 
</head>

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

Interní šablony stylů jsou pokyny CSS zapsané přímo do záhlaví konkrétní stránky .html. (To je zvláště užitečné, pokud máte na webu jednu stránku, která má jiný vzhled než ostatní.) Interní šablona stylů vypadá asi takto. . .
<head> 
<style> 
Body {background-color: thistle; } 
P {velikost písma: 20px; barva: mediumblue; } 
</style> 
</head>

. . . 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

A konečně, vložené styly jsou úryvky CSS zapsané přímo do kódu HTML a lze je použít pouze pro jeden prvek kódu. Třeba nadpis:
<h1 style = ”font-size: 40px; color: violet;”> Podívejte se na tento nadpis! </h1>

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.

Užitečné odkazy

[1] Kaskádové styly 

[2] CSS Introduction (ENG)

[3] What is CSS? (ENG)

Odborník na tvorbu webů:

Hana Terberová

„Webů jsem vytvořila spousty – tvořím je již roky. Proto bych se označila za profesionála v oboru. Mám bohatou zkušenost s tvorbou webů na Wordpressu, pomocí nástrojů jako Webnode, nebo i dokonce jen tak skrze HTML. Krom toho jakožto profesionální grafik umím poradit i v designovém světě. A vzhledem k tomu, že se i neustále zajímám o novinky z technologickýho světa, tak si můžete být jistí kvalitou obsahu.”

Zajímá vás více o webu? Podívejte se.

Kam dál?