Les 3

Fonts

Je weet nu hoe je een basis Style Sheet moet maken. Nu is het tijd om wat meer te leren over de verschillende stijlregels die je op kunt geven. In principe kun je voor elke tag stijlregels opgeven.

We beginnen met de fonts en de verschillende eigenschappen en waarden hiervan. Ik gebruik bij de meeste voorbeelden alleen de stijlregels, hoe je ze in een inline, internal en external Style Sheet zet, heb je in les 2 gezien.

Als je met fonts werkt, kun je verschillende eigenschappen opgeven, zoals de kleur, het lettertype, de font-style en de font-weight. Zo kun je een tekst er precies zo uit laten zien als jij wilt.

Font-family

Met de font-family eigenschap kun je een bepaald lettertype opgeven. Je kunt er ook meerdere opgeven, dan moet je er wel een komma tussen zetten. Je kunt het beste altijd als laatste een zogenaamd generiek font (generic font) plaatsen. Dit font is normaal gesproken altijd aanwezig op een computer.

Er zijn vijf generieke fonts:

• serif
• sans-serif
• cursive
• fantasy
• monospace

Een voorbeeld van font-family:

p { font-family: Arial, Courier, 'Franklin Gothic Book', sans-serif }

Resultaat:

Nu wordt de tekst in deze paragraaf geschreven in het lettertype Arial. Als Arial niet aanwezig is dan wordt Courier gebruikt, etcetera.

N.B. Gebruik je een font met spaties in de naam? Zoals hierboven Franklin Gothic Book, dan moet je de fontnaam in de stijlregel tussen enkele quotes plaatsen (' en ').

Font-style

Drie mogelijke waarden voor font-style:

• normal (is standaard)
• italic
• oblique

Een voorbeeld van font-style:

h1 { font-style: italic }
p { font-style: normal }

Resultaat:

Schuingedrukte H1

Normale paragraaf-tekst

Font-variant

Twee mogelijke waarden voor font-variant:

• normal (standaard)
• small-caps

Een voorbeeld van font-variant:

h1 { font-variant: normal }
p { font-variant: small-caps }

Resultaat:

H1 normal

Dit zijn small-caps

Font-weight

Vijf mogelijke waarden voor font-weight:

• normal
• bold
• bolder
• lighter
• of een waarde tussen 100 en 1000

Een voorbeeld van font-weight:

h1 { font-weight: 500 }
p { font-weight: bolder }

Resultaat:

H1 tekst

Paragraaf-tekst is: bolder

Font-size

Tien mogelijke waarden voor font-size:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• larger
• smaller
• of een waarde in bijv. pixels (px), points (pt), percentages

Een voorbeeld van font-size:

h1 { font-size: 16pt }
p { font-size: xx-small }

Resultaat:

H1 nu 16 points groot

Paragraaf-tekst is hier xx-small.

Meerdere font eigenschappen tegelijk

Natuurlijk hoef je niet iedere keer een nieuwe stijlregel te beginnen als je een andere font-eigenschap wilt opgeven.
Je kunt ze, gescheiden door punt-komma's, achter elkaar opgeven.

Zo bijvoorbeeld:

p { font-family: Arial, serif; font-weight: bolder; font-size: 10pt; font-style: italic }

Resultaat:

Zo ziet de tekst in de paragraaf er dan uit.

Einde les 3

Nu weet je alles over de verschillende font-eigenschappen en de mogelijke waarden hiervan.
In de volgende les leer je hoe je een achtergrond(kleur) en een tekstkleur kunt instellen met behulp van CSS.

• Verder naar les 4!
• Terug naar het lessenoverzicht

MijnHomepage Tip