Čo je externá tabuľka štýlov?

Externá šablóna štýlov definuje, ako vyzerá webová stránka. Pomocou šablóny štýlov môžete určiť veci, ako je veľkosť, farba a písmo textu, farba tlačidiel alebo umiestnenie ponúk a bočných panelov.

Kód použitý v externej šablóne štýlov

Na vytvorenie základnej webovej stránky sa používajú dva typy kódu:

• Značkovací jazyk HyperText (HTML): Definuje obsah webovej stránky. Obsahuje skutočný text so značkou, ktorá identifikuje, či sú časti textu odstavcami, nadpismi alebo zoznamami. Obsahuje tiež odkazy na obrázky, ktoré sa zobrazujú na stránke, a hypertextové odkazy na externé stránky.
• Kaskádové štýly (CSS): Kódovací jazyk používaný na určenie spôsobu zobrazenia obsahu. Definuje, ako sa zobrazuje každý typ textového prvku, a môže rovnaký typ prvku zobraziť odlišne, ak patrí do rôznych tried alebo má odlišné ID. Toto umožňuje, aby sa veci, ako sú ponuky a zoznamy, správali v hlavnom texte webovej stránky veľmi odlišne.

Všeobecne je oddelenie štýlu od obsahu dobrý nápad, pretože umožňuje sústrediť sa na jednu vec naraz. To sa stáva v tíme ešte dôležitejším, čo umožňuje špecialistom na obsah a prezentáciu pracovať nezávisle od ostatných. A čo je možno dôležitejšie, umožňuje tiež jednotnú aplikáciu štýlových pokynov na celú webovú stránku.

Vizuálnu prezentáciu webu je potom možné zmeniť z jednej šablóny štýlov bez nutnosti úpravy každej webovej stránky zvlášť. V prípade väčších komplexných webových stránok je možné na kontrolu textu, ponúk a rozdelení na stránkach použiť niekoľko šablón štýlov. Táto kolekcia štýlov sa dá nazvať „téma“.

Použitie externého CSS na prepojenie HTML s CSS

Je možné zahrnúť štýl CSS priamo do kódu HTML webovej stránky. Pomocou štýlov CSS môžete každý odsek a nadpis individuálne upraviť. Tento typ inline styling všeobecne nie je dobrý nápad, pretože stratíte všetky výhody oddelenia štýlu od obsahu. Najdôležitejšie je, že stratíte schopnosť dôsledne aktualizovať celý svoj web z jedného súboru.

Správnym spôsobom, ako aplikovať štýl na webovú stránku, je vytvoriť jeden externý súbor so štýlmi pre každý typ štýlu, ktorý chcete použiť, a potom na ne odkazovať zo všetkých súborov HTML. Môžete mať napríklad tieto externé šablóny štýlov:

• text.css
• menus.css
• layout.css

V týchto externých štýloch môžete vykonávať zmeny v kóde CSS bez ich zmeny názvy súborov, čo znamená, že odkazy na tieto súbory v rámci HTML všetkých vašich webových stránok nebudú zmenil.

Príklady HTML a CSS

Veľmi jednoduchá stránka HTML môže obsahovať nasledujúci kód:

 Všetko o mne!

Táto stránka je o mne a prečo som úžasný.

Na túto stránku je možné prepojiť jednoduchú externú šablónu štýlov pridaním nasledujúceho kódu pod.

type = "text / css"
href = "myStyle.css" />

Vytvorte ďalší textový súbor s názvom myStyle.css, ktorý sa nachádza v rovnakom priečinku ako index.html a obsahuje nasledujúci kód:

h1 {
farba: # FF7643;
font-face: Arial '
}
p {
farba: červená;
veľkosť písma: 1,5em;
}