Na obrázku vľavo, môžete vidieť objekty, ktoré menu obsahuje. Sú to rovnako použiteľné objekty ako je objekt menu. To znamená, že každý jeden z týchto objektov môže mať svoje vlastné css, ktoré zmenia vzhľad ktoréhokoľvek objektu.

Na mojom Simple Blue designe však nie je použité žiadne CSS, ktoré by menilo vzhľad ktoréhokoľvek z týchto objektov a tak si pozrieme len základné formátovanie samotného menu objektu.

#menu h2 { font-family:"Times New Roman", Times, serif; font-size:1.7em; font-weight:normal; margin:5px 0; padding:1px; color:#6590DF; letter-spacing:2px; border-bottom:1px dotted #ddd; } #menu ul li { list-style:none; margin:0; } #menu ul { margin:0; padding:0; } #menu li { padding-left:5px; } #menu li a, #menu li a:active, #menu li a:visited { color:#666; } #menu li a:hover { color:#6590DF; } #menu-nav, #menu-topics, #menu-calc, #menu-links, #menu-features { padding:5px 0 10px 0; } #visits { padding-top:30px; }

Ako prvé si všimnite definíciu #menu h2. Táto definícia určuje vlastnosti pre heading veľkosti 2 H2, pričom tieto vlastnosti sú uzatvorené len pre skupinu objektu #menu. To znamená, že čokoľvek, čo zadefinujete pre H2 v tomto, ovplyvní iba H2 ktoré je uzatvorené v objekte menu. Môžete tu vidieť, že je tu zadefinovaná veľkosť písma, tvar písma, farba písma, okraje, odsadenie a pod. Všetko to, čo už poznáme z iných nastavení.

Nové sú pre nás zoznamy s odrážkami, tzv. listy. Ak poznáte HTML, tak ide o tagy ul, ol, li. Pre menu máme definíciu #menu ul li, v ktorej je zapísané, že odrážky v menu nemajú mať žiadne odsadenie (margin) a nemajú mať ani žiadny typ odrážky (list-style: none;). Samotné #menu ul nám opäť definuje, že nemajú byť v ul použité žiadne okraje a ani odsadenie (margin a padding). Hneď pod touto definíciou definujeme #menu li, ktoré určuje, že každý jeden prvok zoznamu bude mať padding-left:5px; - odsadenie z ľavej strany - 5 pixelov. Ďaľšia, komplikovanejšia definícia, určuje vlastnosti "selektorov". Selektory sú typy štýlov, ktoré majú isté správanie pri - napríklad - prechode myšky nad niektorým objektom (a:hover, a:visited, a:link). Môžeme si teda popísať definíciu #menu li a, #menu li a:active, #menu li a:visited { color:#666; }. Táto hovorí, že všetky linky (#menu li a), všetky aktívne linky (a:active), všetky navštívené linky (a:visited) budú mať tmavú sivú farbu, definovanú pomocou color: #666;. Po tomto kóde je ešte definícia #menu li a:hover { color:#6590DF; }, ktorá určuje správanie liniek pri prechode myškou (a:hover). Ak prejdete v navigácii nad linkou, zmení farbu na #6590DF, čo je bledomodrá farba.

Veľmi dôležité sú definície pre všetky objekty, ktoré môžete vidieť aj na obrázku. Tu sa definuje vlastnosť, ktorá určuje všetky odsadenia textu v objektoch (padding).

#menu-nav, #menu-topics, #menu-calc, #menu-links, #menu-features { padding:5px 0 10px 0; }

To, čo všetky tieto objekty dokážu si povieme pri štýlovaní a tvorení vlastného vzhľadu objektov. Teraz prejdeme na ďalšiu "lekciu", ktorou bude zoznam článkov a objekty, používané v zozname.