Naast dat je de tekst op je website een fancy kleurt kunt geven, bestaan er nog veel meer mogelijkheden om de tekst op een mooie manier weer te geven. Je kunt bijvoorbeeld het lettertype instellen, de grootte etc.
Font-family
Het standaard lettertype wat door de meeste browsers gebruikt wordt is Times New Roman. Als je dus geen specifiek lettertype aangeeft in je HTML of CSS zal dit lettertype standaard gebruikt worden.
Om een ander lettertype te kiezen, gebruik je de selector font-family.
Let op: om het lettertype weer te geven wat je in je code hebt aangegeven dient dit lettertype wel geïnstalleerd te zijn op de computer die de bezoeker van je website gebruikt. Er zijn een aantal standaard lettertypes die veilig zijn om te gebruiken, zoals Arial, Verdana en Times New Roman. Maar je kunt ook meerdere lettertypes aangeven door deze te scheiden met een komma voor het geval het lettertype van je eerste keuze niet geïnstalleerd is op de computer van je bezoeker. Dus stel dat jouw eerste voorkeur uitgaat naar het lettertype Helvetica, maar het alternatief Arial is, dan komt de code er dus als volgt uit te zien:
font-family: helvetica, arial;
Wanneer de naam van een lettertype uit meer dan 1 woord bestaat dien je de naam van het lettertype tussen haakjes te zetten, zoals:
font-family: "Times New Roman";
Font-size
Door middel van font-size kun je de grootte van het lettertype instellen.
Let op: voor het aangeven van titels en sub-titels dien je nog steeds de heading-tags te gebruiken (h1 t/m h6).
Font-weight
Door middel van de tags <b> en </b> kun je kleine stukken tekst in een paragraaf vetgedrukt weergeven. Maar wil je dat een bepaald stuk tekst standaard vetgedrukt is, bijvoorbeeld een heading? Dan kun je daarvoor de selector font-weight gebruiken in je stylesheet:
font-weight: bold; Geeft tekst vetgedrukt weer
font-weight: normal; Geeft tekst normaal weer
Font-style
Net zoals de tags <i> en </i> de tekst schuingedrukt weergeven, kun je door middel van de selector font-style bepaalde tekst/elementen altijd schuingedrukt weergeven.
font-style: italic; Geeft tekst schuingedrukt weer
font-style: normal; Geeft tekst normaal weer
Text-decoration
Door middel van text-decoration kun je in CSS aangeven of een tekst onderstreept is, of er een lijn boven de tekst komt of juist door de tekst heen:
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;
Let op: het wordt sterk aangeraden om alleen de links op je website te onderstrepen. Bezoekers associëren onderstreept tekst automatisch met een link en het kan dus frustratie opwekken als blijkt dat dat stukje tekst helemaal niet klikbaar is.
Text-transform
Met text-transform kun je de opmaak van je tekst wijzigen door overal of gedeeltelijk hoofdletter te plaatsen.
text-transform: capitalize; Ieder woord begint met een hoofdletter
text-transform: uppercase; Alles wordt in hoofdletters weergegeven (capslock)
text-transform: lowercase; Alles wordt in kleine letters weergegeven
text-transform: none; Tekst wordt weergegeven zoals jij hem ingetypt hebt
Geen opmerkingen:
Een reactie posten