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.
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.
