Prečo práve CSS?
CSS je jedinečný spôsob ako formátovať webové stránky, meniť ich vzhľad a zároveň jednoduchým spôsobom oddeliť formu od obsahu. Určite si mnohí z vás teraz kladú otázku, prečo je dobré CSS, keď máme formátovacie značky a atribúty aj v HTML. V podstate som to už zodpovedal. V prvom rade ide o oddelenie formy od obsahu. Na ďalšej, nemenej dôležitej pozícii sú obrovské formátovacie schopnosti a možnosti. Štýly nám presne poukazujú na to, ako má jednotlivý element (napr. h1) vyzerať, pričom používaním CSS sa dá ušetriť niekoľko KB kódu. A keby sme sa niekedy rozhodli zmeniť napr. farbu písma pre všetky odstavce (paragrafy), tak by nám to v HTML zabralo možno aj hodiny (záviselo by to od veľkosti projektu a od výskytu elementu p v kóde). V CSS je to otázka niekoľkých sekúnd.
Praktický príklad:
<p color="black">Toto je odstavec čiernou farbou</p>
<p color="red">Toto je odstavec červenou farbou</p>
<p color="blue">Toto je odstavec modrou farbou</p>
Z typického HTML príkladu je jasne vidieť, že ak by sme mali takýchto odstavco niekoľko a v každom súbore, zabralo by nám to istý čas, kým by sme všetky zjednotili na jednu farbu. Teraz si však predstavme, že máme v xhtml súbore zadefinovaný externý CSS štýl (vysvetlím neskôr). Naším cieľom bude zadefinovať pre všetky odstavce rovnakú farbu (napr. modrú). V taktomto prípade, bude externý CSS dokument vyzerať následovne:
/* zdroj externého CSS štýlu (toto je komentár v CSS) */
p {color: blue}
/* Koniec CSS štýlu */
Ešte trochu teórie
Štýl je vlastne súhrn istých pravidiel, ktoré určujú, ako sa má daný element správať (ako má (ne)vyzerať), pričom každé pravidlo sa skladá z dvoch častí. Prvou je element, ktorý označujeme ako "selektor" a druhou časťou je deklarácia (definícia nachádzajúca sa v zložených zátvorkách). Vyzerá to takto:
selektor {vlastnosť: hodnota vlastnosti}
p {color: blue}
Tento zápis znamená, že selektorom je HTML element p (paragraf), pre ktorý platí, že jeho vlastnosť color (farba písma) bude mať hodnotu blue (modrá). Samozrejme, ak by sme chceli také isté vlastnosti priradiť aj inému selektoru, nemusíme stále rozpisovať selektor a vlastnosti, stačí, ak ich oddelíme čiarkou a vypíšeme im prislúchajúce vlastnosti.
Napr.:
p, h1, h4 {color: blue}
Taktiež je možné selektoru pripísať viacero vlastností. Tie oddelíme od seba bodkočiarkou. Napríklad chceme určiť, že text nadpisu úrovne 1 bude mať červenú farbu a veľkosť jeho písma bude 16 pixelov.
h1 {color: red; font-size: 16px}
Komentáre v CSS
Komentáre v CSS sú v celku dôležité, nakoľko ak píšeme rozsiahly CSS súbor a používame množstvo tried a identifikátorov, niekedy je naozaj veľmi obtiažne vyznať sa v nich. Komentár v CSS vytvoríme tak, že ho umiestnime medzi /* a */. Medzi lomítka s hviezdičkami môžeme umiestniť ľubovoľný komentár, ktorý môže byť aj na viacerých riadkoch. Tento komentár sa samozrejme vo výsledku neobjaví. Slúži len pre potreby administrátora (resp. kódera).
Pripájanie štýlov k HTML, XHTML... dokumentu
Štýl môžeme definovať v HTML dokumente rôznymi spôsobmi. Môžeme ho mať priamo v dokumente, alebo môže byť na serveri nahratý ako externý súbor s príponou .css, môže to byť dokonca aj súbor z iného servera. Ja osobne preferujem externú definíciu štýlu. Hlavne preto, že v tomto prípade naozaj dochádza k takmer úplnému oddeleniu formy od obsahu, kód je prehľadnejší a niektoré vyhľadávače za externé štýly "prideľujú body" (napr. aj Google).
Interný štýl - v HTML dokumente
Takýto štýl umiestňujeme priamo do dokumentu HTML, najlepšie je umiestniť ho do hlavičky dokumentu. Vyzerá to takto:
<html>
<head>
<title>Titulka stránky</title>
<style type="text/css">body {color: blue}</style>
</head>
<body>
<p>Všetok text v celom dokumente bude modrý, nakoľko sme to takto definovali pre selektor body (v ktorom je uzavretý celý dokument). Samozrejme ak by sme neksôr aplikovali na nejaký iný selektor inú farbu, tak by sa pre daný selektor použila práve tá farba, pretože CSS využíva tzv. vážnosť štýlov.</p>
</body>
</html>
Vnorený štýl - tiež v HTML dokumente
Tento štýl sa tiež nachádza v HTML dokumente, no jeho definíciu neumiestňujeme do hlavičky, ale priamo do nejakého tagu.
<html>
<head>
<title>Titulka stránky</title>
</head>
<body>
<h1 style="color: green">Nadpis zelenej farby</h1>
</body>
</html>
Externý štýl - súbor nahratý na serveri
Túto metódu mám, ako som už spomenul, najradšej. Oplatí sa najmä, ak pre niekoľko dokumentov používame jeden a ten istý štýl. Podstata je v tom, že takýto štýl uložíme na server, pričom bude mať príponu .css (napr. styl.css). Potom ho zadefinujeme (načítame do súboru) tým, že naň odkážeme v hlavičke dokumentu.
<html>
<head>
<title>Titulka stránky</title>
<link rel="stylesheet" type="text/css" href="styl.css" />
</head>
Z tohoto príkladu je pekne vidieť, že odkazujeme tagom link na súbor "style.css", ktorý sa nachádza na našom serveri, kde sa nachádza aj HTML dokument. V externom štýle už môže byť vyjadrený akýkoľvek selektor s akýmikoľvek hodnotami (ktoré majú zmysel).
Štýl mimo servera
Ak je štýl umiestnený na nejakom inom serveri, tak ho môžeme definovať takto (definujeme ho v hlavičke):
<style type="text/css">@import url("http://www.neco.cz/styl.css");</style>
Pre úplnosť len dodám, že týmto spôsobom môžete odkazovať aj na štýl, ktorý sa nachádza na tom istom serveri ako Váš HTML dokument.
Zabudol som ešte podotknúť, že CSS je možné písať v obyčajnom Notepade (poznámkovom bloku) alebo nejakom inom programe, ktorý je na to určený. Ja osobne používam Programmers Notepad 2, kde píšem zdrojové kódy pre XHTML, CSS, PHP a podobne. Na dnes by toho bolo aj celkom dosť. Nabudúce si povieme niečo o farbách v CSS. Svoje komentáre mi tu kľudne môžete nechať v diskusii.
