Met behulp van CSS kun je de gehele opmaak van je website bepalen, 1 van de belangrijke onderdelen
die je dan opmaakt met CSS is de tekst op de pagina's. Eigenschappen als lettertype, kleur, grootte etc.
kun je eenvoudig allemaal aangeven. Deze stijlen kun je dan toepassen op alle tekst (p) op een website
maar uiteraard ook per element zoals per div of tabel. Een voorbeeld van opmaak voor alle tekst die
omringd is met P (paragraph) tags hieronder met daaronder uitleg over de verscheidende tekstopmaak
eigenschappen.
<style type="text/css">
p {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 18px;
color: #FF0000;
}
</style>
De eerste paar eigenschappen die je zult gebruiken voor tekst zijn de onderstaande:
font-family
Voor je website kun je middels CSS een specifiek lettertype instellen voor je tekst. Het is
belangrijk om hiervoor een web-safe lettertype in te stellen. Een web-safe lettertype is een
lettertype die over het algemeen is geïnstalleerd op vrijwel alle computers waardoor alle
bezoekers je website goed kunnen bekijken in het aangegeven lettertype zoals Arial. Op deze
manier voorkom je dat je website er plots anders uitziet voor een bezoeker. In de code definieer
je een aantal lettertypes, als een bezoeker het eerst vermelde lettertype niet heeft wordt er
automatisch gekeken of het tweede lettertype aanwezig is, enzovoort. Een overzicht van
webveilige lettertypes staat hier onder.
Het is wel mogelijk om andere lettertypes voor bijvoorbeeld kopjes te gebruiken met behulp van de
techniek sIFR, een combinatie van Javascript en Flash.
font-size
Hiermee geef je de grootte van het lettertype aan. De grootte kun je aangeven op diverse
manieren, pt, px, cm, em en %. Door het lettertype eventueel te definieren middels em of %
maak je het de gebruiker mogelijk om via de browserinstellingen de tekstgrootte te wijzigen. Het
overzicht van verschillende waardes hieronder:
font-style
Hiermee kun je de tekst bijvoorbeeld cursief zetten, dan vervang je normal voor italic.
font-weight
Tekst kun je natuurlijk ook vet / bold / strong maken, dit geef je aan met font-weight. Door
normal door bold te vervangen maak je de tekst vet. Je kunt de mate van dikte ook verder
instellen naar wens door de waarders bolder, lighter of 100, 200 en 800 te gebruiken.
text-decoration
Met text-decoration kun je bijvoorbeeld links of andere teksten voorzien van een onderlijning,
doorlijnen of een lijn erboven. Waardes hiervan zijn, underline, overline, line-through. Een
voorbeeld van de drie waardes hieronder:
text-align
De tekst kun je ook uitlijnen, links rechts en in het midden. De waardes om dit te bepalen binnen
een element zijn: center, left en right. Justify is ook een optie, hiermee wordt de tekst uitevuld
binnen het element wat je hieronder kunt zien:
Color
De kleur geef je aan met kleurcodes, #00000 staat voor zwart, #FFFFFF is wit. Meer codes van
kleuren vind je onder de webtools : Kleurcode pallet. Voor een aantal standaard webkleuren is
het ook mogelijk om de naam van de kleur op te geven, bijvoorbeeld red voor rood, black voor
zwart en white voor wit.
line-height: 18px;
Met line-height bepaal je de regel afstand, als je deze eigenschap weglaat uit je css is de regelafstand
normaal, door deze wel in te stellen kun je de regelafstand dus vergroten/verkleinen zoals dat
bijvoorbeeld ook kan met tekst in Word. Vooral met grote stukken tekst is het vaak leesbaarder als de
regelafstand enigszins ietsjes groter is.
letter-spacing: 5pt
Word-spacing en letter-spacing zijn nog twee andere opties. Word-spacing geeft de mogelijkheid om de
ruimte tussen woorden te vergroten. Letter-spacing zorgt ervoor dat de ruimte tussen de letters zelf wordt
vergroot:
text-transform:uppercase;
Met de eigenschap text-transform heb je een aantal opties om standaard de tekst in hoofdletters
of juist kleine letters te plaatsen. Deze eigenschap overruled dan de manier waarop je tekst
getypt hebt. Als je tekst in hoofdletters type maar met text-transform zegt dat tekst in kleine
letters weergegeven moeten worden dan is dit laatste het geval. Waardes hiervoor
zijn UPPERCASE lowercase en Capitalize. Met deze laatste wordt altijd de eerste letter van een
woord voorzien van een hoofdletter.
text-shadow:1px 1px 1px #cccccc;
De eigenschap text-shadow is een manier om schaduw toe te voegen aan tekst. Dit kan
bijvoorbeeld mooi staan bij een H1, etc. Je geeft in de code de dikte van de schaduw aan
evenals de kleur. Een voorbeeld van een grijze schaduw zie je hieronder.
text-indent:30px;
Met de eigenschap tekst-indent kun je bepalen dat de eerste regel van een paragraaf inspringt.
Een voorbeeld hieronder waarin text-indent is ingesteld op 30px.
In een interne stylesheet ziet de code van de p (paragraph) tekst er dan zo uit. In een extern stylesheet
komen dan de CSS tags te vervallen.
<style type="text/css">
p {
font-size: 12 pt;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 18px;
color: #FF0000;
}
</style>
Nu is het natuurlijk niet zo dat je al je tekst dezelfde opmaak hoeft te geven, met name voor kopjes van
teksten is het mooi als je deze een iets andere opmaak geeft als je normale tekst door bijvoorbeeld een
andere kleur of lettertype.
Net als in HTML geef je kopjes ook aan met H1 t/m H6. Je gebruikt hiervoor ook weer de font
eigenschappen zoals hierboven, een voorbeeld van zo'n kopje ziet er dan als volgt uit in combinatie met
het P (paragraph opmaak).
<style type="text/css">
p {
font-size: 12 pt;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 18px;
color: #FF0000;
}
H1 {
font-size: 16 pt;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: normal;
color: #FF5700;
}
</style>