Stránky neboli dlhú dobu aktualizované. Môžu obsahovať nepresné alebo neaktuálne informácie.
V jazyku CSS máme veľa možností, ako určovať vzhľad prvkov. Tie, ktoré nepatria medzi najzákladnejšie, si teraz ukážeme.
Pri niektorých tagoch, napr. A, môžeme používať tzv. pseudotriedy. Tie určujú, za akých podmienok bude mať tag dané vlastnosti. Od názvu tagu ich oddeľujeme dvojbodkou bez medzery.
Pseudotrieda hover tagu A určuje, že prvok (v tomto prípade odkaz) má mať dané vlastnosti, ak sa nad ním nachádza kurzor myši. Takto to vyzerá v praxi:
<html>
<head>
<title>Stránka so štýlmi</title>
<style>
a:hover {color: green}
</style>
</head>
<body>
<a href="nieco.html">Dajte tu kurzor</a>
</body>
</html>
Ak by ste na danej stránke dali kurzor na akýkoľvek odkaz, sfarbil by sa na zeleno.
Poznáme aj iné pseudotriedy tagu A, a to link - bežný odkaz, active - aktívny (teda naňho práve klikáme) a visited - navštívený odkaz.
/* bezne odkazy */
a:link {color: red}
/* aktivne odkazy */
a:active {background-color: lime}
/* navstivene odkazy */
a:visited {color: blue}
Tento hrôzostrašný názov udáva, aká časť textu bude mať dané vlastnosti. Dva bežne používané pseudoelementy sú first-letter a first-line. Pri použití prvého z nich sa určené vlastnosti aplikujú na prvé písmeno textu, v druhom zas na prvý riadok. V uvedenom príklade bude mať prvé písmeno odstavca oranžovú farbu:
p:first-letter {color: orange}
Selektor a triedu možno použiť i zároveň. V našom príklade bude mať modré písmo len odstavec triedy „modry“:
<html>
<head>
<title>Stránka so štýlmi</title>
<style>
p.modry {color: blue}
</style>
</head>
<body>
<p class="modry">
Modrý odstavec
</p>
<div class="modry">
Bežný text
</div>
</body>
</html>
Zobrazme si aj ukážku:
Modrý odstavec
Sú dosť zaujímavé. Určujú, že ak sa daný tag nachádza vo vnútri iného tagu, má mať špecifické vlastnosti. Napríklad kontextuálny selektor div em znamená, že pokiaľ bude tag EM obkolesený tagom DIV, získa určené vlastnosti. Možno to pochopíte z príkladu:
<html>
<head>
<title>Stránka so štýlmi</title>
<style>
div em {color: green}
</style>
</head>
<body>
<em>
Čierny text
</em>
<div>
<em>
Zelený text
</em>
</div>
</body>
</html>
Zíde sa nám, ak chceme deklarovať viacero selektorov, tried alebo identifikátorov naraz. Hromadná deklarácia prakticky nepridáva žiadne nové možnosti. Dokáže nám však zjednodušiť prácu a trochu zmenšiť veľkosť súboru so štýlmi. Podstatou je, že vymenujeme napr. veľa selektorov a oddelíme ich čiarkami.
V uvedenom príklade budú mať všetky odstavce (P), SPANy a DIVy žltú farbu písma:
p, span, div {color: yellow}
Je to vlastne skrátený zápis nasledujúceho kódu:
p {color: yellow}
span {color: yellow}
div {color: yellow}