Stránky neboli dlhú dobu aktualizované. Môžu obsahovať nepresné alebo neaktuálne informácie.
Selektor, trieda a identifikátor sú tri základné možnosti vkladania štýlov CSS na webové stránky. Zapisujeme ich do deklarácie CSS.
Najviac sa hodí, ak potrebujeme, aby mal každý tag na stránke rovnaký vzhľad. Ak chceme, aby mal odstavec zelenú farbu písma, zapíšeme to v tvare: názov_tagu {vlastnosť: hodnota}.
p {color: green}
Odteraz bude mať každý odstavec na stránke zelené písmo.
Aby ste mali jasnejšiu predstavu o zdrojovom kóde, uvediem kompletný príklad, kde použijem deklaráciu priamo v dokumente.
<html>
<head>
<title>Stránka so štýlmi</title>
<style>
p {color: green}
</style>
</head>
<body>
<p>
Odstavec
</p>
</body>
</html>
A výsledok?
Pokiaľ chceme, aby viaceré (nie však všetky) prvky na stránke mali podobný výzor, je najlepšie použiť tzv. triedu. Do deklarácie CSS uvedieme text v tvare: .názov_triedy {vlastnosť: hodnota}. K vybranému tagu potom priradíme atribút CLASS. Ukážka:
<html>
<head>
<title>Stránka so štýlmi</title>
<style>
.cervene {color: red}
</style>
</head>
<body>
<div class="cervene">
Nejeký text
</div>
</body>
</html>
Text bude červený:
Identifikátor (skrátene ho nazývam ID) je veľmi podobný triede. Je medzi nimi zopár odlišností (použitie v JavaScripte), ale ak chcete mať validnú stránku, odporúčam vám triedu. Na validnej stránke sa smie jeden identifikátor nachádzať len raz.
ID pridelíme tagu pomocou rovnomenného atribútu a v deklarácii CSS uvedieme miesto bodky (ako pri triede) mriežku.
<html>
<head>
<title>Stránka so štýlmi</title>
<style>
#cervene {color: red}
</style>
</head>
<body>
<div id="cervene">
Nejeký text
</div>
</body>
</html>
Výsledok je v tomto prípade rovnaký ako pri použití triedy.
Určuje, čo konkrétne chceme na vzhľade prvku meniť. Napr. vlastnosť color mení farbu písma, background-color farbu pozadia, cursor zas kurzor. Ak máme napríklad selektoru priradiť len jednu vlastnosť, postup je už známy:
a {color: orange}
Pri priradení viacerých vlastností jednému selektoru/triede/ID oddeľujeme jednotlivé vlastnosti bodkočiarkou. Teraz bude mať odstavec zelené písmo a žlté pozadie:
p {color: green; background-color: yellow}
Ešte si ukážeme konkrétny príklad na deklaráciu pre jeden prvok (nasledujúci text je už v tele HTML dokumentu):
<div style="color: blue">Modrý text</div>
Ak elementu neurčíme danú vlastnosť, bude mať tzv. predvolenú hodnotu.
Takto nejako môže vyzerať zdrojový text stránky so štýlmi:
<html>
<head>
<title>Stránka so štýlmi</title>
<style>
span {color: #FF0000}
.modre {color: blue}
.zlte-pozadie {background-color: yellow}
</style>
</head>
<body>
<span class="zlte-pozadie">
Červené na žltom
</span>
<h4 class="modre">Nadpis</h4>
</body>
</html>
Nezabudnime na ukážku:
Červené na žltom