Een introductie in de CSS tekst eigenschappen

CSS staat voor Cascading Style Sheet en wordt gebruikt om je webpagina’s op te maken. Alle elementen op de pagina kun je visueel aanpassen met behulp van CSS. Hier gaan we kijken naar verschillende manieren om tekst op te maken. Dit is een samenvatting van een uitgebreid artikel in het Engels. In het Engelse artikel (CSS font properties: a tutorial) is meer uitleg en zijn voorbeelden te vinden.

Dikgedrukt, schuingedrukt en tekst kleur

Net als in Microsoft Word kun je ook op het web je tekst dikgedrukt of schuingedrukt weergeven. Voor de dikte van de tekst gebruik je de eigenschap font-weight, om de tekst schuin te drukken gebruik je de eigenschap font-style. De tekst een andere kleur geven kan met de eigenschap color.

Tekstgrootte

De lettergrootte van de tekst kun je ook instellen. Dit gaat met de eigenschap font-size. Er zijn verschillende eenheden waarin je de font-size kunt weergeven zoals px, em’s en rem’s.

Lettertype

Tegenwoordig zijn er online steeds meer verschillende lettertypes beschikbaar. Vroeger was dit wel anders, toen kon je alleen kiezen uit een paar standaard lettertypes. Met de komst van Google web fonts heeft typografie op het web een nieuwe dimensie gekregen. Voor de Google web fonts geldt dat voordat je deze kunt gebruiken het lettertype ingeladen moet worden. Je kunt ofwel een extra stylesheet inladen of gebruik maken van de @font-face eigenschap.

Schaduw en small-caps

Met de komst van CSS3 is het ook mogelijk om je tekst te voorzien van een schaduw. Dit gaat met de eigenschap text-shadow. De eigenschap font-variant kan gebruikt worden om een woord of stuk tekst in small-caps te zetten. De eerste letter is dan een hoofdletter gevolgd door kleinere hoofdletters.

Tekst kleur en animatie

Veel CSS eigenschappen kunnen worden geanimeerd. De kleur van de tekst is hierop geen uitzondering. Je moet hierbij gebruik maken van de eigenschap @keyframes om aan te geven van welke naar welke kleur de tekst kleur geanimeerd moet worden. Je kunt ook aangeven hoelang een animatie moet duren en hoe vaak de animatie herhaald moet worden.

Zoals eerder aangegeven is dit een korte samenvatting van het oorspronkelijke Engelse bericht (CSS font properties: a tutorial).


Mijn Twitter profiel Mijn Facebook profiel
Leonie Derendorp Webdeveloper and co-owner of PLint-sites in Sittard, The Netherlands. I love to create complex webapplications using Laravel! All posts
Alle berichten tonen van Leonie Derendorp

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *