Voordat we aan de slag gaan met het combineren van HTML en style sheets nemen we eerst een aantal grondbeginselen van de taal onder de loep. CSS is gebaseerd op rules en style sheets. Een rule is een definitie van een stilistisch aspect van één of meerdere elementen, bijvoorbeeld de kleur groen toekennen aan de tag. Een style sheet bevat op zijn beurt weer één of meerdere rules.

In het volgende voorbeeld ziet u de simpelste vorm van een style sheet, namelijk die met één rule. De rule geeft aan dat alle headings van het type

groen gekleurd zijn.
H2 { color: green}
Deze rule bestaat uit twee onderdelen: een selector (alles voor de openings accolade) en een declaration (alles binnen de accolades). De declaration kan vervolgens worden onderverdeeld in een property (eigenschap) en een value (waarde). In dit voorbeeld is color de property en green de value. Eigenschap en waarde worden van elkaar gescheiden door een dubbelpunt. Kent u meerdere eigenschappen toe aan een selector dan worden deze gescheiden door een puntkomma.

H2 { color: green; font-style: italic; font-size: large}

Omdat één van de doelstellingen van CSS het terugbrengen van het dataverkeer is, zou het niet verstandig zijn om extreem lange codes op te nemen in het HTML-document. Stel dat u behalve de H2 tag ook alle headings van het type H1 groen, cursief en groot wilt maken. Normaal gesproken zou u dat dan als volgt doen.

H1 { color: green; font-style: italic; font-size: large}
H2 { color: green; font-style: italic; font-size: large}

Om dit in te korten, kunt u in CSS ook de selectors samenvoegen.

H1, H2 { color: green; font-style: italic; font-size: large}

Maar wat zou u doen als u alle inhoud op een pagina blauw wilt hebben en alle headings van het type

rood? De meest logische manier is om alle elementen te benoemen waarvan u gebruik maakt. De style sheet zou er zo kunnen uitzien.

H1 { color: blue }
H2 { color: blue }
P { color: blue }
LI { color: blue }
LU { color: blue }
H3 { color: red }

Niet echt handig. Gelukkig kent HTML ook de zogenaamde ouder/kind-relaties, waardoor kinderen kunnen erven van de ouder. De ouder van alle tags in het bovenstaande voorbeeld is de tag. Als we aan de tag de kleur blauw toekennen zal de hele pagina (afgezien van de achtergrond) in het blauw worden weergegeven. Omdat we de

tag rood willen hebben, geven we alleen daar de specificatie van op. De style sheet ziet er dan zo uit.

BODY { color: blue }
H3 { color: red }

Bij het erven wordt één belangrijke regel in acht genomen, namelijk dat alles wat specifieker is zal overwinnen. In het vorige voorbeeld is de tag

specifieker gedefinieerd en zal dus rood worden weergegeven in plaats van blauw. Deze regel geldt zowel voor specificaties in style sheets als in de gewone HTML-tags. Bij deze HTML-tags kunt u er van uitgaan dat alles wat is genesteld voorrang krijgt boven de specificatie in de style sheet. Twee voorbeelden.

Voorbeeld 1:
Als u in de body van het document heeft staan,

Wie zal er winnen

en in de style sheet

h1 { color: red }

dan zal de hele regel rood worden weergegeven en het woord 'winnen' cursief staan.

Voorbeeld 2:

Als u in de body van het document heeft staan,

Wie zal er winnen

en in de style sheet

H1 { color: red }

dan zal de hele regel rood worden weergegeven en zal het woord 'winnen' cursief en blauw zijn. In Cascading Style Sheets krijgt alles wat gespecificeerder is voorrang.