Co je CSS a k čemu nám je dobré? CSS #1

Co je CSS kód a jak ho využijeme na blogu?

Online svět je plný zkratek a kolem spousty můžeme projít bez povšimnutí. Né tak ale v případě CSS. Proč? Co se za ním skrývá a proč se vyplatí mít o něm aspoň ponětí?

Cascading Style Sheets

CSS je zkratka vytvořená z anglického termínu Cascading Style Sheets, česky kaskádové styly (nebo jen styly). Je to jazyk, který se používá k popisování toho, jak se budou elementy na stránce zobrazovat, případně i chovat. Umožňuje nám je formátovat. Umožňuje nám společně s dalším kódem web designovat.

Původně sloužilo CSS jako doplněk, rozšíření kódu psaného v HTML. Vylepšovalo ho a přinášelo další možnosti formátování, které HTML samo o sobě neumělo. A umožnilo pravidla pro formátování centralizovat – do jednoho jediného souboru vypsat všeobecně platná pravidla, kterými se pak řídí celý web.

Postupem času se však CSS rozšiřovalo a vyvinulo se do dnešní verze CSS3. Stalo se naprosto nezbytnou součástí webových stránek a samozřejmým jazykem pro všechny, kdo se webdesignu i drobným úpravám věnují.

Nutno taky říct, že CSS zrovna jako HTML můžeme užít i třeba při tvorbě jakýchkoliv dokumentů, nejen webů. Já v nich kupříkladu dala dohromady ebooky. Někdo jiný zas díky CSS připraví u dokumentů speciální pro tisk vhodnou verzi.

CSS v praxi

CSS je primárně pro webdevelopery a webdesignery, to je pravda. Ale rozhodně se vyplatí mít o něm nějaké ponětí všem, kdo pro web běžně tvoří. Rozhodně základy CSS jsou jednoduché a seznámit se s nimi má přínos dost velký na to, aby vykompenzoval pár hodin námahy.

Dneska de facto každý web má taky svoje CSS soubory. V nich se definuje, jak bude vypadat pozadí webu, jak nadpisy, jak široký bude prostor pro text nebo třeba jak se bude chovat odkaz, když na něj najedeme kurzorem myši. A hlavně v dnešní době se CSS obvykle starají o tolik důležité zobrazování na mobilech a tabletech. Stanovit velikost písma nebo barvu pozadí bychom totiž zvládli i jen s HTML jazykem, hezké zobrazení na mobilu ale velmi těžko.

Pár příkladů, kdy se náš web bez CSS neobejde

Moc CSS můžeme snadno poznat ve chvíli, kdy se z nějakého důvodu soubor s tímto kódem nenačte. Z hezkého webu se rázem stane jeden holý (a dosti ošklivý) text.

Možnosti, které nám dává CSS, oceníme třeba při…

zobrazování webu na různě velkých obrazovkách. Internet v mobilu si užijeme taky zásluhou CSS formátování. Díky němu se stránka zobrazí nějak na počítači a jinak na mobilu. Obsah webu bude plus mínus stejný, lišit se bude jeho rozložení, vzhled. Díky CSS bude na mobilu text krásně čitelný, menu přehledné, rolovat budeme jen dolů, nikdy ne do stran. Všechny tyhle změny oproti klasické verzi webu si nadefinujeme na jednom místě v souboru se styly.

změnách designu. Pokud se rozhodneme pro změnu třeba barvy nadpisů na celém webu, máme to víc než snadné. Stačí v CSS souboru najít definici právě pro nadpis a přepsat příslušnou hodnotu barvy.

Krása CSS mimo jiné tkví taky v tom, že jedním jediným pravidlem se řídí všechny prvky na celém webu, které byly na pravidlo navázány. Takže třeba u toho nadpisu víme, že každý nadpis na webu je automaticky klasifikován a tím pádem navázán na centrálně určené pravidlo. Změníme tak barvu na jednom řádku ve stylech a rázem tak modifikujeme barvu všech nadpisů na celém webu.

vypínání prvků. Styly nám dávají možnost námi vybrané prvky nezobrazit nebo je zobrazit jen někdy. Já tuhle možnost používám různě. Když designuju web a vím, že za měsíc budu potřebovat další blok obsahu, už pro něj místo nachystám teď. V CSS ale nastavím, aby se nezobrazoval. Jakmile nazraje jeho čas a já ho budu chtít rozbrazit, jen přepíšu jedno slůvko. Nebo do verze webu pro velké obrazovky můžu zakomponovat víc prvků, protože mi to prostor dovoluje a web bude zajímavější. U mobilní verze ale tyto doplňkové prvky nechci, protože tam je o prostor boj. Takže je vypnu.

generování stránky pro tisk. Díky CSS můžeme určit, co všechno a jakým způsobem se zobrazí na stránce při tisku. Třeba když máme blog s recepty nebo návody, můžeme prostřednistvím stylů změnit vzhled dokumentu pro tisk – odstranit pozadí a všelijaké postranní panely, nastavit správně velké písmo, upravit velikost obrázků… Prostě udělat pár změn, které povedou k pěknému a funkčnímu tištěnému dokumentu pro naše návštěvníky.

Jak se CSS naučit?

Celou dobu tu CSS chválím, tak by taky bylo potřeba říct, jak se je naučit nebo jak aspoň objevit pár triků, se kterými můžeme kouzlit na našem webu.

Tak jako u jiných s IT souvisejících věcí, i tady je (pravděpodobně) nejlepší cestou ke znalostem samostudium (případně samostudium s vedením) a hlavně praxe. Přečíst si pár článků, okouknout, jak se kód píše. A hlavně zkusit si to v praxi. Existují taky online kurzy zdarma, i bezplatné. Jsou dobré na rozjezd, ale psát kód nás nenaučí. Nakonec si ale každý musí najít to, co mu bude vyhovovat a bude ho bavit. Každopádně není třeba stát se profi kodérem, abychom CSS mohli využít. Stačí se naučit pár drobností a přínos to má ohromný.

Někdy příště se na nějaké základy CSS vrhneme společně.

 

Odkazy na zajímavý studijní materiál:

Komentovat

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete použít tyto HTML značky a atributy:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Odesláním komentáře souhlasíte se zpracováním vašich údajů (více info)

Po odeslání musí být komentář ručně schválen, aby nebyla diskuse plná spamu :). Bude proto chvíli trvat, než se komentář pod příspěvkem zobrazí. Díky!