Terug naar beginpagina Homepage-Maken.nl
Versio Webhosting   

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:

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:

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:

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:

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:

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.

Klik hier om te starten met je Weebly website!

Zoekfunctie en Overige Info


Copyright © Homepage-Maken.nl 2000-2018 · Privacybeleid

Deze pagina voldoet aan de XHTML 1.0 richtlijnen     Deze pagina voldoet aan de CSS richtlijnen

[Naar boven]  [Home]