Cursus CSS - deel 2: font-properties

Trefwoorden: CSS, website, cursus, font-properties, font, font-family, font-style, font-size, font-weight, font-variant

1. Inleiding


Nu we weten wat CSS is, hoe het werkt en hoe we het kunnen linken aan een HTML-pagina gaan we de verschillende opmaakmogelijkheden van CSS van dichterbij bekijken.

In dit deel van de cursus kijken we welke opmaakmogelijkheden er zoal bestaan voor lettertypes, ofwel font-properties. Vergeet wel niet dat veel van de properties die we zullen zien ook gebruikt kunnen worden voor andere doeleinden en veel properties die later aan bod komen ook kunnen gebruikt worden bij tekst. CSS is dus een techniek waarmee je veel kan experimenteren en mooie dingen op het scherm kan toveren.

2. Font-properties


De font-properties kunnen vergeleken worden met de font-tag uit HTML. De font-tag is, zoals eerder al gezegd, niet meteen de beste oplossing om opmaak aan je teksten toe te voegen. Daarvoor kan je dus CSS gebruiken en je tekst gewoon tussen een p-tag of span-tag plaatsen.
Met font-properties kan je onder andere het lettertype van je tekst, de vetheid, de grootte, ... aanpassen.
Om de properties uit te leggen aan de hand van een voorbeeld zullen we dit stukje HTML-code gebruiken. In de code zie je dat we het bestand opmaak.css linken aan de pagina. Alle CSS zal dus in dit bestand komen.

CODE
  1. <html>
  2. <head>
  3.         <title>Font-properties</title>
  4.  
  5.         <link rel="stylesheet" href="opmaak.css" type="text/css" />
  6. </head>
  7.  
  8. <body>
  9.         <h2>Duis sed quam. Ut ornare.</h2>
  10.  
  11.         <p>Quisque sodales ante nec est mattis scelerisque. Nullam ornare. Vivamus eget elit vel nibh cursus congue. Duis facilisis turpis id elit. Sed tincidunt sollicitudin massa. Donec metus justo, condimentum quis, elementum vitae, euismod eget, lorem. Vivamus pellentesque varius est. Quisque ac erat. Sed euismod est. Phasellus nec libero. Morbi luctus pretium libero. Praesent placerat dui sit amet lectus. Vestibulum mauris est, lacinia sit amet, mattis ac, pharetra id, urna. Phasellus porttitor consequat velit. Nullam mattis.
  12.  
  13. <span>In a risus non nisl tincidunt sagittis.</span> Donec semper rhoncus ante. Quisque a orci. Pellentesque fringilla lorem vel mi. In hac habitasse platea dictumst. Phasellus nec arcu non nunc tempus tempus. Aliquam sapien. Quisque vehicula, enim mattis condimentum posuere, turpis justo hendrerit sem, eget dictum est elit vel nulla. Etiam purus massa, ultrices eget, volutpat sed, lobortis at, neque. Phasellus ante. Praesent ullamcorper, justo et porttitor fermentum, purus diam consectetuer ligula, nec tincidunt leo ipsum id purus. Aenean gravida sem id sapien. Pellentesque elementum pede vel mi. In hac habitasse platea dictumst. Proin pulvinar nisi ac nisi. Nam nisl nibh, faucibus et, sodales id, pharetra sit amet, sapien. In tristique gravida dolor. Suspendisse varius justo et nunc. Aliquam erat volutpat. In id felis.</p>
  14. </body>
  15.  
  16. </html>


2.1. Font-family

Met font-family kunnen we het lettertype van de tekst aanpassen.
De value die bij font-family hoort is de naam van het lettertype. Als je font-family: Arial; als declaration opgeeft, zal het lettertype van de tekst Arial zijn. Je kan elk mogelijk lettertype opgeven, maar de bezoeker van de website zal het pas zien als dat lettertype ook op zijn computer ge´nstalleerd staat. Pas dus goed op met vreemde lettertypes!
Als een soort backup, kan je ook meerdere lettertypes opgeven gescheiden door een komma. Als het eerste lettertype niet ge´nstalleerd staat op de computer van de bezoeker zal hij/zij het tweede lettertype te zien krijgen. Of, als dit ook niet ge´nstalleerd is, het derde, en zo verder...

Omdat we willen dat de volledige pagina het lettertype Arial heeft, passen we font-family toe op de body-tag.

CODE
  1. body
  2. {
  3.         font-family:Arial;
  4. }


Let er goed op dat je de declaratie afsluit met een puntkomma( ; ). Dit is zeer belangrijk voor de goede werking!

Als je zelf mee aan het doen bent met ons voorbeeld zou de tekst in je browser nu Arial als lettertype moeten hebben.

2.2. Font-style

Met font-style is het mogelijk de stijl van de letters aan te passen. Daarmee wordt bedoeld of de letters schuin of normaal moeten staan.
De value die er bij hoort is dan ook "normal" voor normale tekst of "italic" voor schuine tekst. In feite is het enkel nodig deze property te gebruiken als je schuine tekst wil. Normale tekst is namelijk de standaard.

In het voorbeeld zullen de tekst tussen de span-tag (te vinden op regel 13) cursief plaatsen. Omdat er meerdere span-tags op onze pagina kunnen staan en we enkel deze tussen de p-tags willen aanpassen, passen we ook onze selector aan. De selector wordt "p span". Zo weet de browser dat we de span-tag in de p-tag bedoelen.
Je ziet het, we breiden onze stylesheet telkens uit:

CODE
  1. body
  2. {
  3.         font-family:Arial;
  4. }
  5.  
  6. p span
  7. {
  8.         font-style:italic;
  9. }


2.3. Font-variant

Font-variant heeft 2 values: "normal" voor normale tekst of "small-caps". Bij small-caps worden de letters als hoofdletters weergegeven, maar met de grootte van een normaal woord. "Website" wordt dan bijvoorbeeld "WEBSITE" (niet WEBSITE dus, je ziet duidelijk het verschil).

We zullen dit ook eens uittesten op de span-tag van onze voorbeeldpagina:

CODE
  1. body
  2. {
  3.         font-family:Arial;
  4. }
  5.  
  6. p span
  7. {
  8.         font-style:italic;
  9.         font-variant:small-caps;
  10. }


2.4. Font-weight

Font-weight past de vetheid van de tekst aan, een beetje hetzelfde dus als wat de strong-tag met de tekst doet. Bij font-weight kan je de vetheid aangeven met een cijfer tussen 100 en 1000 ofwel met de woorden "normal" voor normale tekst, "bold" voor iets vettere tekst, "bolder" voor nog vettere tekst en "lighter" voor lichtere tekst.

We zullen zorgen dat ons paragraafje in het vet staat:

CODE
  1. body
  2. {
  3.         font-family:Arial;
  4. }
  5.  
  6. p span
  7. {
  8.         font-style:italic;
  9.         font-variant:small-caps;
  10. }
  11.  
  12. p
  13. {
  14.         font-weight: bold;
  15. }


2.5. Font-size

Als laatste property bekijken we font-size. Hiermee kunnen we de grootte van de tekst aanpassen. Als value kunnen we de woorden "smaller", "xx-small", "x-small", "small", "medium", "large", "x-large," "xx-large" en "larger" gebruiken. We kunnen ook de grootte uitdrukken aan de hand van een getal of percentage. Een getal kan je uitdrukken in px, mm of cm, ex of em en pt of pi. Bij een percentage geldt dat 100% de normale grootte is. Elk percentage boven de 100 geeft dus een grotere tekst. Elk percentage onder de 100 geeft een kleine tekst.

In ons voorbeeld zorgen we dat alle tekst 15px groot is. We passen font-size dus toe op de body-tag

CODE
  1. body
  2. {
  3.         font-family:Arial;
  4.         font-size:15px;
  5. }
  6.  
  7. p span
  8. {
  9.         font-style:italic;
  10.         font-variant:small-caps;
  11. }
  12.  
  13. p
  14. {
  15.         font-weight: bold;
  16. }


3. Geziene properties


Als hulpmiddel krijg je hier nog alle font-properties op een rijtje met wat uitleg.

PropertyMogelijke valuesBetekenis
font-familyde naam van een lettertypepast het lettertype toe
font-stylenormal
italic
cursieve tekst
font-variantnormal
small-caps
kleine hoofdletters
font-weightnormal
bold
bolder
lighter
getal tussen 100 en 1000
vetheid van de tekst
font-sizesmaller
xx-small
x-small
small
medium
large
x-large
xx-large
larger
getal
percentage
grootte van de tekst


4. Slot


Met de font-properties kan je tekst aan passen zoals jij het wil. Dit is echter niet het enige wat we met tekst kunnen doen in CSS. Andere properties zoals voor kleur, text, ... worden later nog behandeld.
Blijf dus vooral oefenen en probeer verschillende dingen uit.

Als er vragen zijn, mag je die altijd stellen in de forums.Dit artikel werd geschreven door Simon op dinsdag 5 augustus 2008 om 22:13 en werd sindsdien 9581 keer gelezen.

  • Pagina
  • 1 van 1

Geen reacties gevonden
Er werden nog geen reacties bij dit artikel geplaatst.
  • Indien je denkt iets te kunnen toevoegen aan het artikel, kan je zelf een reactie schrijven via de koppeling Plaats een reactie bij dit artikel hieronder.
  • Indien je andere commentaar (iets wat niet meteen functioneel bijdraagt aan het artikel zelf) hebt, kan je een bedankje formuleren via de koppeling Plaats een bedankje bij dit artikel hieronder.