CSS styly se používají k vytvoření stylu (vzhledu) webové stránky (barva, písmo, velikost písma). S CSS styly můžete pomocí jednoho souboru ovlivňovat design celého webu.
Styly definujeme pomocí selektorů, tříd a identifikátorů.
Selektory
Styl můžeme definovat pro jednotlivé značky (tagy)
a) v těle dokumentu
Úkol: Barvu nadpisu první úrovně, značka <h1>, změňte na modrou. Text <h1> zaměňte za text <h1 style="color: blue">. Uložte. Zobrazte v prohlížeči.
b) v hlavičce <head> dokumentu
Úkol: Barvu nadpisů druhé úrovně, značka <h2>, změňte na červenou. Do hlavičky dokumentu, mezi značky <head> a </head> vložte text:
<style type="text/css">
h2 {color: red }
</style>
Uložte. Zobrazte v prohlížeči. Výhoda druhého způsobu je v tom, že pomocí jedné deklarace, změníme styl všech prvků najednou, tzn. všechny texty uzavřené uvnitř značky <h2></h2> budou červené.
Třídy - class
Třídy se definují v hlavičce dokumentu v tagu <style> takto:
.název_třídy { deklarace }
Chceme-li potom třídu použít, uděláme to pomocí atributu class jehož parametrem je název třídy:
<input class="název_třídy">
Tím předáme deklaraci třídy danému tagu.
Úkol: V dokumentu máme definovaný seznam, tag <ul>. Změňte barvu položek tohoto seznamu na zelenou. Do hlavičky dokumentu, mezi značky <style> a </style> přidejte text .zelena {color: green}. (Pozor - tečka pouze na začátku). Nadefinovali jsme třídu s názvem zelena, barva písma zelená. Značku (tag) <ul> doplňte o text class="zelena". Uložte. Zobrazte v prohlížeči.
Identifikátory - id
Mají podobné využití jako třídy, ale užívají se spíše ve spojení s JavaScriptem, kde se na stránce vyskytuje pouze jeden identifikátor, jinak skript funguje chybně nebo nefunguje.
Deklarace identifikátoru:
#název_identifikátoru { deklarace }
odkaz na identifikátor:
<input id="název_identifiktoru">
Úkol: Pro text "Záložka je typ odkazu, který směruje do specifikované části stránky (používá se v dlouhých stránkách)." změňte velikost textu na 20px a barvu textu na modrou. Do hlavičky dokumentu, mezi značky <style> a </style> vložte identifikátor: #dvacet_modra {color: blue; font-size: 20px}. Měněný text uzavřete do značek <p id="dvacet_modra"> a </p>. Uložte. Zobrazte v prohlížeči.