10 - CSS - fonts

• ICT
• MBO
• Studiejaar 1,2

FONTS in CSS

Leerdoel

Aan het einde van de les weten jullie hoe jullie fonts kunnen gebruiken en aanpassen.

Wat weet je al over fonts in CSS?

Wat zijn fonts?

Fonts zijn lettertypen die gebruikt worden om tekst weer te geven.

CSS font-eigenschappen

CSS biedt verschillende eigenschappen om fonts aan te passen, zoals 

• font-family

• font-size

• font-weight.

Font-families

Een font-family bepaalt het lettertype dat gebruikt wordt voor tekst. Je kunt meerdere fonts opgeven, gescheiden door een komma.

.p1 {

    font-family: "Times new Roman", Times, serif;

}

.p2 {

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

}

Times new Roman

Times new Roman

Font-size

Font-size bepaalt de grootte van de tekst. Je kunt waarden opgeven in pixels, ems, procenten, etc.

.p1 {

    font-size: 16px;

}

.p2 {

    font-weight: 36px;

}

Dit is 'normal' stijl

Dit is 'italic' stijl

Font-weight

Font-weight bepaalt de dikte van de tekst. Je kunt waarden zoals 'normal', 'bold' en getallen tussen 100 en 900 gebruiken.

.p1 {

    font-weight: normal;

}

.p2 {

    font-weight: bold;

}

Dit is 'normal' stijl

Dit is 'italic' stijl

Font-styling

CSS biedt ook eigenschappen zoals font-style en text-decoration om de stijl van de tekst aan te passen.

.p1 {

    font-style: normal;

}

.p2 {

    font-style: italic;

}

Dit is 'normal' stijl

Dit is 'italic' stijl

Oefening

1. Maak een nieuwe HTML-pagina genaamd "fontstyling.html."
2. Voeg enkele paragrafen tekst toe aan de pagina. Dit kan bijvoorbeeld een korte beschrijving zijn van een onderwerp naar keuze.
3. Selecteer een lettertype (font) naar keuze voor de gehele tekst op de pagina. Je kunt een lettertype kiezen dat beschikbaar is op de meeste computers, zoals "Arial" of "Times New Roman."
4. Gebruik CSS om het geselecteerde lettertype toe te passen op de tekst op de pagina.
5. Voeg enkele eenvoudige opmaakstijlen toe aan de tekst, zoals het veranderen van de tekstkleur, het toepassen van vetgedrukte of cursieve tekst, en het instellen van een tekstgrootte (font-size).

Samenvatting

Je weet nu op welke manieren je FONTS kunt gebruiken en kan aanpassen binnen HTML door middel van CSS. Hierbij hebben we de volgende eigenschappen behandeld:

• font-family

• font-size
• font-weight.
  

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.