|
Je kan per pagina de Style Sheet definiëren in de hoofding van de HTML-pagina zelf. In dit geval moet je dus wel pagina per pagina de Style Sheet aanpassen als je een globale verandering wil doorvoeren in je site.
Als je de Style Sheet in je hoofding definiërt, koppel je dus eigenlijk niet echt je inhoud los van je opmaak. Hier is een voorbeeld van zo’n link om een Style Sheet te integreren in je hoofding (tussen je <head>-tags dus ) :
<style type="text/css"> </style> Tussen deze tags zet je dan de verschillende Statements, waarmee in je pagina alle elementen rekening zullen houden.
Statements : Selectors & Declaraties
Een Style Sheet bestaat dus uit een stel STATEMENTS : dit zijn gewoon de eigenlijke regels. Statements bestaan uit SELECTORS en DECLARATIES. De Selectors zijn de gebieden of stukken inhoud waar de regels op toegepast moeten worden, en de Declaraties zijn dan de eigenlijke regels.
Dit is een voorbeeld van een Statement :
body {
font-family: Courier, "Minion Web", Arial, sans-serif;
font-size: 1em;
text-align: justify;
}De Selector is hier body . Deze Statement is dus van toepassing op alles wat zich in de HTML-pagina tussen de <body>-tags bevindt. De Declaratie volgt onmiddellijk op de Selector, en staat tussen gebogen haakjes. Hier worden 3 Properties ( of eigenschappen ) gedeclareerd.
In dit geval zal elk element in de body waarop het Statement van toepassing is, invloed uitgeoefend krijgen op 3 van zijn eigenschappen. Meer bepaald de font, de lettergrootte en de aliniëring van al de tekst in de body zal aangepakt worden. Properties kunnen soms meerdere waarden krijgen. Er worden hier bijvoorbeeld 4 fonts gedeclareerd.
-
Declaraties bestaan dus uit één of meer properties, gescheiden door een punt komma.
- Een Property bestaat uit de naam van de Property, een dubbele punt en dan één of meer waarden van de Property, gescheiden door een komma en een spatie.
- Dit alles wordt omgeven door gebogen haakjes, en voorafgegaan door de selector, en vormt zo in zijn geheel een statement
- Eén of meerdere van deze statements zet je onder elkaar, tussen de <style> en </style>-tags, in de hoofding van de pagina.
|
Ontwerp je site