In de vorige les gebruikte we de volgende voorbeeld-stylesheet:
body {
color: #00FF00;
background-color: #008000;
}
| Regel 1: | body { | Hier is body de selector. Daarna komt de { (accolade openen). Hierdoor weet de browser dat alles wat tussen { en } komt de CSS-code is die voor de body geld. |
|---|---|---|
| Regel 2 + 3: |
color: #00FF00; background-color: #008000; |
Dit zijn de eigenschappen die de body krijgt. color: #00FF00; betekent dat de tekstkleur felgroen wordt, en background-color: #008000; betekent dat de achtergrondkleur donkergroen wordt. |
| Regel 4: | } | De accolade sluiten (}) betekent dat de CSS-code die hierna komt niet meer van toepassing is op de body-tag. Alleen de code tussen de { en de } is van toepassing op de body-tag. |
Je kunt commentaar aan je CSS-code toevoegen zodat het duidelijker voor jezelf (en voor anderen die je stylesheet zien) wordt. Dit is zeker bij grotere stylesheets handig. In CSS kun je commentaar toevoegen door het te plaatsen tussen /* en */.
Bijvoorbeeld in het regeltje "color: #00FF00;" geef je de eigenschap color de waarde #00FF00;. Je kunt hem ook bijvoorbeeld de waarde 'red' geven, of de waarde RGB(255, 0, 0). Dat zijn alledrie kleuren. Soms moet je teksten opgeven, bijvoorbeeld bij lettertypes. Sommige lettertypes hebben spaties, zoals Comic Sans MS. Daar zul je in een stylesheet quotes (") omheen moeten zetten: "Comic Sans MS".
Globaal gezien kunnen we de syntax (manier waarop je een stylesheet maakt) nu dus als volgt omschrijven:
selector {
eigenschap: waarde;
eigenschap: waarde;
}
selector {
eigenschap: waarde;
eigenschap: waarde;
}
Je weet nu hoe een stylesheet eruit ziet. In de volgende les leer meer over selectors.
⇒ Ga verder met Les 3: Selectors
← Ga terug naar Les 1: Inleiding
↵ Terug naar de CSS-cursuss
Simon de Vries
info@simondevries.com