Ingesloten stijlblok

Als stijlregels moeten gelden voor het hele document plaats je ze in de HEAD tussen de tags <STYLE> en </STYLE>. Dit noemen we een "ingesloten stijlblok". De commentaartags <!- - en - -> zijn nodig om te voorkomen dat bladerprogramma's die geen CSS ondersteunen de stijlregels als normale tekst zouden weergeven.

In een ingesloten stijlblok kan je eigenschappen voor alle HTML-elementen (of groepen elementen) bepalen. T.o.v. inline stijlregels biedt het ingesloten stijlblok veel meer flexibiliteit en gemak van onderhoud. Bijvoorbeeld: als je je kleurencombinaties toch niet zo geslaagd vindt kan je met één kleine aanpassing het uitzicht van je hele pagina verbeteren. De pagina-ontwerper kan zonder veel moeite experimenteren met verschillende formatteringen, bestaande stijlregels veranderen, stijlregels verwijderen of toevoegen.

Syntaxis

selector {eigenschap:waarde; eigenschap:waarde; …}

Voorbeeld

<style>
<!--

B {text-transform:uppercase;}
P {border:silver thick solid; background-color:yellow; padding:10px; text-align:center;}

-->
</style>

 

In ons voorbeeld heeft het stijlblok twee regels. De eerste regel bepaalt dat alle tekstdelen van het document DIE VET GEDRUKT WORDEN (selector B) terzelfdertijd in hoofdletters verschijnen. De tweede regel bepaalt dat alle paragrafen (selector P) een dikke zilveren rand krijgen en een gele achtergrond, dat de tekst gecentreerd is en op 10 pixels van de rand blijft.