Reglerne følger hinanden fra generelt (store elementer eg. <body>) til specifik detalje.
CSS-reglerne "flyder" således fra yderste element til inderste - dvs hvis man vil ændre noget for alle elementer kan man starte med at modificere <body> og se hvordan det udvikler sig.
ex:
body {
font-family: Helvetica, Arial, sans-serif;
}
Uanset i hvilken rækkefølge CSS-reglerne skrives vil de blive nedarvet i henhold til dokumentets orden. Derfor er det en god idé at skrive de mest generelle regler først - så har man styr på det.
http://www.codeproject.com/KB/books/JavaScript_Programmers/10fig06.jpg
Det er en stor fordel at lave et selvstændigt dokument (med efternavnet .css) og det knyttes lettest til .html-dokumenterne gennem Dreamweaver. I CSS-arket skrives det tag man vil ramme uden < > og med selve reglerne i {}. For enden af hver regel skrives et ; så browseren ved at reglen er færdig.
ex.
p {
color:#ffffff;
background-color:#90e342;
}
Man kan også omforme
til
og evt. lægge et
Bemærk, den sidste benytter en kombination af to klasser.
Læg også mærke til hvordan css-koden bruger rækkefølgen af tags til at præcisere, hvad der skal formes. Først deklareres at den unordered-list som er tilføjet class'en "vandret" (så er det skrevet uden mellemrum i css)
ul.vandret {
list-style:none;
clear:both;
display:block;
}
ul.vandret li {
float:left;
color:#eee;
background-color:#900;
padding:5px;
margin:5px;
}
Dernæst deklareres at list-item under den unordered-list som er tilføjet class'en "vandret" skal have en særlig behandling - og så berører det ikke den liste som ikke har nogle class'er ...
Ved hjælp af tegnene /* */ kan man sætte en parantets omkring nogle css-regler man gerne vil undersøge. Så behøver man ikke at slette, hvis det nu er noget andet som faktisk er galt. Det som står imellem /* og */ vil browseren ignorere.