Website - CSS, Tekst opmaak


Een belangrijk onderdeel van een website is de tekst en deze maak je ook op met behulp van CSS. Eigenschappen als lettertype, kleur en tekstgrootte zijn eenvoudig te bepalen. Deze stijlen kun je dan toepassen op alle tekst (P) op een pagina maar uiteraard ook per element zoals per div of tabel. Een voorbeeld van opmaak voor alle tekst die omringt is met P tags hieronder met daaronder uitleg over de verscheidende eigenschappen.

De eerste paar eigenschappen die je zult gebruiken voor tekst zijn de onderstaande.

p {
        font-size:12px;
        font-family:Arial, Helvetica, sans-serif;
        font-weight:normal;
        font-style:normal;
        line-height:18px;
        color:#FF0000;
}

font-family:Arial, Helvetica, sans-serif;

Voor je website kun je middels CSS een specifiek lettertype instellen voor je tekst. Het is belangrijk om hiervoor een websafe lettertype in te stellen. Een websafe lettertype is een lettertype die over het algemeen is geinstalleerd op vrijwel alle computers waardoor alle bezoekers je website goed kunnen bekijken met het ingestelde lettertype zoals bijvoorbeeld Arial. Op deze manier voorkom je dat je website er plotseling anders uitziet voor een bezoeker. In de code geef je een aantal lettertypes aan zodat als een bezoeker het eerst vermelde lettertype niet heeft er automatisch wordt gekeken of het tweede lettertype aanwezig is, etc. Een klein overzicht van alle webveilige lettertypes hieronder.

  • Arial
  • Arial Black
  • Comic Sans
  • Verdana
  • Courier New
  • Georgia
  • Impact
  • Lucida Sans
  • Trebuchet MS
  • Times New Roman

Het is overigens wel mogelijk om andere speciale lettertypes voor bijvoorbeeld koppen te gebruiken met behulp CSS of een techniek als Cufon. Meer hierover lees je hier.

font-size:12px;

Met font-size 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 snel te wijzigen. Een overzicht van verschillende waardes hieronder in de tabel.

pt px em %
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
11pt 15px 0.95em 95%
12pt 16px 1.0em 100%
13pt 17px 1.05em 105%
14pt 19px 1.2em 120%
15pt 20px 1.25em 125%

font-style:italic;

Hiermee kun je de tekst bijvoorbeeld cursief zetten, dan vervang je normal voor italic.

font-weight: normal;

Tekst kan natuurlijk ook vet gemaakt worden, dit geef je aan middels 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:normal;

Met text-decoration kun je bijvoorbeeld links of andere teksten onderstrepen of doorstrepen. Waardes die gebruikt kunnen worden zijn, underline, overline en line-through. Een voorbeeld van de drie waardes toegepast zie je hieronder staan.

underline overline line-through

text-align:normal;

Tekst kan met CSS worden uitgelijnd, je hebt dan de keuze uit links, rechts en in het midden. De waardes zijn als volgt: center, left en right. Justify is ook een optie, hiermee wordt de tekst uitgevuld binnen het element waarvan een voorbeeld hieronder.

Text align Justify optie. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc congue. Nullam turpis. Aliquam erat volutpat. Curabitur vitae felis eget metus sollicitudin hendrerit. Maecenas fringilla tellus. In hac habitasse platea dictumst. Nam vel est. Aliquam urna. Cras est lectus, fringilla nec, faucibus eget, lobortis at, eros. Phasellus facilisis hendrerit dui. Curabitur ut metus. Mauris ipsum neque, tristique in, gravida ac, auctor sed, lacus. Nullam nunc nunc, consequat nec, imperdiet ac, fermentum ut, ante.

color:#000000;

De kleur van de tekst geef je aan middels hexadecimale waardes. Zo staat #00000 voor zwart, #FFFFFF is wit, #FF0000 is rood en #FF6600 is oranje. 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 zoals red voor rood, black voor zwart.

line-height:18px;

Met line-height bepaal je de regelafstand, door de regelstand in te stellen kun je de ruimte tussen regels vergroten of verkleinen zoals dat bijvoorbeeld ook kan met tekst in Word. Vooral met grote stukken tekst is het vaak leesbaarder als de regelafstand iets 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 en zal vaak toegepast worden op koppen.

letter-spacing: 5px;

word-spacing: 20px; - Lorem ipsum dolor sit amet

text-transform:uppercase;

Met de eigenschap text-transform heb je een aantal opties om standaard de tekst in hoofdletters of juist in kleine letters te plaatsen. Deze eigenschap overschrijft dan de manier waarop tekst getypt is. Als je tekst in hoofdletters typt maar met text-transform aangeeft dat tekst in kleine letters weergegeven moet worden dan is dit laatste het geval.

Waardes hiervoor zijn: uppercase, lowercase en capitalize. Met de laatste, capitalize wordt standaard altijd de eerste letter van een woord in de tekst voorzien van een hoofdletter.

text-shadow:1px 1px 1px #cccccc;

De eigenschap text-shadow is een manier om schaduw toe te voegen aan tekst, bijvoorbeeld een leuke toevoeging voor koppen. Je geeft in de code de dikte van de schaduw aan evenals de kleur. Een voorbeeld van een grijze schaduw zie je hieronder.

Lorem Ipsum Dolor Simet

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 30 pixels.

Text align Justify optie. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc congue. Nullam turpis. Aliquam erat volutpat. Curabitur vitae felis eget metus sollicitudin hendrerit. Maecenas fringilla tellus. In hac habitasse platea dictumst. Nam vel est. Aliquam urna. Cras est lectus, fringilla nec, faucibus eget, lobortis at, eros. Phasellus facilisis hendrerit dui. Curabitur ut metus. Mauris ipsum neque, tristique in, gravida ac, auctor sed, lacus. Nullam nunc nunc, consequat nec, imperdiet ac, fermentum ut, ante.