<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style type="text/css" media="screen">
body { text-align:center; background:#a8cff0; font-size:90%; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; margin:0; padding:0; }
#page { width:50em; text-align:left; background:#FFF; border:4px solid #ecf3f9; margin:32px auto; padding:2em; }
h1 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight:normal; margin:0 0 0.5em 0; }
.clear { clear:both; }
/*###################*/
/* Navigacija */
/*###################*/
#navi, #navi ul { list-style-type:none; margin:0; padding:0; } /* Style-Reset */
#navi li { width:128px; float:left; } /* Horizontale Anordnung */
#navi li ul { display:none; } /* Normalzustand eingeklappt */
#navi li:hover ul { display:block; } /* Ausgeklappt */
/*###################*/
/* Stil */
/*###################*/
#navcontainer { height:16px; position:relative; }
#navi { position:absolute; }
#navi li { border:1px solid #000; margin:0 32px 0 0; }
#navi ul li { border:none; margin:0; }
#navi a { font-weight:bold; text-align:center; display:block; padding:0.1em; }
#navi a:link, #navi a:visited { color:#FFF; background:#A8CFF0; text-decoration:underline; }
#navi a:active, #navi a:hover { color:#000; background:#FFF; text-decoration:none; }
<!--[if lte IE 6]>
<style type="text/css" media="screen">#navi { behavior:url("csshover.htc"); }</style>
<![endif]-->
<h1>Navigacioni meni
</h1>
<li><a href="ovdje link">Dobro došli
</a></li>
<li><a href="ovdje link">Neki naslov
</a>
<li><a href="ovdje link">Nesto
</a></li>
<li><a href="ovdje link">nesto drugo
</a></li>
<li><a href="ovdje link">Nesto
</a></li>
<li><a href="ovdje link">neki drugi naslov
</a>
<li><a href="ovdje link">nesto
</a></li>
<li><a href="ovdje link">nesto
</a></li>
<li><a href="ovdje link">nesto
</a></li>
<li><a href="ovdje link">Impressum
</a></li>
CSS (cascading style sheets) nam omogucuje razdvajanje izgleda stranice od njenog sadržaja:
informacije s web-stranica nalaze se u HTML datotekama
podaci o prikazu stranice nalaze se u CSS datotekama
Korištenjem CSS-a definiramo prikaz pojedinih elemenata stranice (npr. da svi naslovi budu u istoj boji i sl.). Možemo takodje definirati i klase, koje odredjuju svojstva nekog elementa (sve elemente oznacene istom klasom tada prikazujemo na isti nacin).
Postoje dva CSS standarda: CSS1 iz 1996. i CSS2 iz 1998 godine (sadrži i sva CSS1 svojstva).
Tri su mogunosti korištenja CSS-a:
izrada tekstualne datoteke sa sufiksom .css u koju spremamo podatke o prikazu stranice
datoteke povezujemo sa stranicama na ciji izgled želimo da utjece sljedecim kodom unutar HEAD taga:
<link rel=stilsit type=text/css href=style.css >
CSS ima nasljedna svojstva (npr. td tag ce naslijediti svojstva body taga ukoliko kod njega ta svojstva nisu posebno definirana)
stil je moguce definirati i u samom kodu HTML stranice, tako da sadržaj CSS datoteke umetnemo unutar STYLE taga (takodjer unutar HEAD taga):
klasu definiramo pomocu tacke (npr. .napomena) a pozivamo je pomocu rijeci class unutar pojedinog taga: