Příklad tabulky stylů

Tabulku nejlépe vytvoříme ve standardním textovém editoru, např. Notepad, a uložíme s příponou .css do adresáře svých webových stránek.

BODY {background-image:url(http://aio.cz/drahy/images/stokrbg.gif); background-attachment: fixed}
h3        {color:#000080; font-family: arial,helvetica,sans-serif}
A:link    {color:#ffffff; border-style:outset}
A:visited {color:#ffffff; border-style:outset}
A:active  {color:#ffffff; border-style:outset}
A:hover   {color:#FFFFFF; border-style: inset}
A.levelsame  {font-family: arial,helvetica,sans-serif; background-color:#000080; font-size: 8pt; text-decoration:none; width:110px; margin:1px}
A.leveldown  {font-family: arial,helvetica,sans-serif; background-color:#008000; font-size: 8pt; text-decoration:none; width:110px; margin:1px}
A.levelup    {font-family: arial,helvetica,sans-serif; background-color:#a00000; font-size: 8pt; text-decoration:none; width:110px; margin:1px}
table       {border:4px ridge #0000e0; width:100%; border-collapse: collapse}
td          {border:1px solid #000080}
td.poznamka {width: 100%; font-family: Arial; color: #000080; font-size: 8pt}
img         {margin: 4px; width: 110px}

Pro uživatele znalé kaskádních stylů není třeba mnoho vysvětlovat, pro ty méně znalé jsou důležité 2 údaje:

1. V řádku BODY absolutní adresa obrázku pozadí. Pokud chcete pozadí jednobarevné, použijte malý (stačí o velikosti 1x1 pixel) obrázek požadované barvy - nejlépe ve formátu gif. URL uveďte jako absolutní adresu bez úvozovek, pouze v závorce.
2. V řádku td.poznamka definujete typ, barvu a velikost písma názvu stránek a popisu. Název stránek je automaticky generován tučným písmem.

Poznámka: Nebuďte příliš odvážní ve výběru fontu, záleží totiž na platformě, jaké fonty má nainstalované a jaké fonty zná. Osobně se přikláním pouze k písmu patkovému (font-family:Times New Roman,serif;), anebo bezpatkovému ( font-family: arial,helvetica,sans-serif)

Poznámka 2: Nedoporučuji měnit barvu tlačítek, abychom uživatele příliš nemátli...

ZPĚT