In een stijlblok in de head van een document en in een extern stijlblad worden de stijlen
vastgelegd met stijlregels. Een stijlregel bestaat uit twee delen: een selector en een blok met
één of meer stijldeclaraties, dat wordt begrensd door accolades (gekrulde haken):
selector { stijldeclaratie }
De selector selecteert de elementen waarvoor de gedeclareerde stijl geldt. Er zijn verschillende soorten
selectors, bijvoorbeeld element-selectors, attribuut-selectors en CLASS- en IDselectors.
Een stijlregel waarbij het H3 element de element-selector is, ziet er bijvoorbeeld als volgt uit:
H3 { font-family: sans-serif; font-size: 16px; }
Een stijlregel waarbij een CLASS-selector is gebruikt is bijvoorbeeld:
<html>
<head>
<style type="text/css">
.speciaal {
color: #FF0000;
background-color: #FFFFFF;
}
</style>
<title>Interne stylesheet</title>
</head>
<body>
<H3 CLASS="speciaal">De tekst van deze H3 is rood</H3>
<P CLASS="speciaal">De tekst van deze P is ook rood</P>
</body>
</html>
Zoals je ziet, kan je deze selector aan één of meer HTML-elementen koppelen via het CLASS attribuut. In
het stylesheet geef je met een punt (.) aan dat het om een CLASS gaat.
Een stijlregel waarbij een ID-selector is gebruikt is bijvoorbeeld:
<html>
<head>
<style type="text/css">
#speciaal{
color: #FF0000;
background-color: #FFFFFF;
}
</style>
<title>Interne stylesheet</title>
</head>
<body>
<h3 id="speciaal">De tekst van deze H3 is rood</h3>
</body>
</html>
In de stylesheet geef je met een hekje (#) aan dat het om een ID gaat.
Het verschil tussen een CLASS en een ID is dat je een ID gebruikt voor één element, terwijl je
een CLASS vaker per pagina gebruikt.
Bij grote stylesheets is het handig om opmerkingen te plaatsen, zodat de code overzichtelijker
blijft. Opmerking worden geplaatst tussen “/*…..*/”.
Bijvoorbeeld:
/* De opmaak voor de paragraaf */
p{
font:Verdana;
background-color:#999;
}
/* de opmaak voor de 'rood'-class */
.rood{
color:#F00;
}