In de declaratie van een CSS-regel staan eigenschappen met de daarbij behorende waarden. Bijvoorbeeld: color: yellow; In dit onderdeel bespreken we de meest gangbare eigenschappen/waarden die gebruikt kunnen worden om tekst op te maken. Een andere naam voor lettertype is font.
Eigenschap | Waarde(n) |
font-family | Verschillende lettertypes |
font-style | normal italic oblique |
font-weight | normal bold bolder lighter |
font-size | px pt % em |
Font-family
De keuze voor het lettertype van de webpagina regel je met de eigenschap font-family. In het CSS-bestand zou de regel font- family: Verdana, “Times New Roman”, Arial; kunnen staan. Het lettertype dat als eerste gebruikt wordt, is Verdana.
Zou het font Verdana niet op de computer van de bezoeker van de website staan, dan wordt automatisch het tweede genoemde lettertype gebruikt. Dat is hier Times New Roman. De naam van dit font staat in het CSS-bestand tussen aanhalingstekens. Dat is verplicht voor lettertypen waarvan de naam uit meerdere woorden bestaat.
Font-style
Met font-style geef je aan of tekst normaal, cursief of schuin wordt weergegeven.
Hiervoor worden achtereenvolgens de waarden normal, italic en oblique gebruikt.
font-style: normal;
font-style: italic;
font-style: oblique;
Font-weight
Font-weight gebruik je om het lettergewicht te regelen. Dat wil zeggen dat je met deze eigenschap aan kunt geven of een letter vet, minder vet of normaal wordt getoond. Het Engelse woord voor vet is bold. We hebben in de tabel niet alle waarden genoemd die gebruikt kunnen worden voor de eigenschap font-weight. Het gewicht van een letter kan worden uitgedrukt in een getal. Het getal 400 komt overeen met de waarde normal, het getal 700 met de waarde bold.
font-weight: normal;
font-weight: bold;
font-weight: 700;
font-weight: bolder;
font-weight: lighter;
Font-size
Met font-size wordt de grootte van het lettertype geregeld.
De grootte van een letterype kan worden aangegeven in pixels (px), punten (pt), procenten (%) of in em.
De W3C-groep beveelt aan om voor de grootte van het lettertype em te gebruiken.
font-size: 16px;
font-size: 16pt;
font-size: 100%;
font-size: 1em;