Les 2: CSS en tekst.

Bij CSS kan je bij eigenlijk alles aangeven hoe de tekst er moet uitzien dus ook bij Table en bij H1. Alle tekst die tussen die tag staat krijgt dan de vormgeving die in css is aangegeven!

We geven de kleur van de tekst aan met gewoon color. De waarde kan een hexadeciamel kleur code zijn of een van de 256 pre-defined colors zoals: black, green en blue.

<h1 style="color: #000000">Een tekst</h1>

Maar wil je nu bijvoorbeeld een ander lettertype gebruiken dan gebruik je font-family.

<h1 style="color: #000000; font-family: verdana">Een tekst</h1>

Zoals je ziet gebruiken we nu een ; om aan te geven dat het eerste element is afgesloten. Als je dit niet doet zal je style niet werken! Je kan ook opgeven als de gebruiker het eerste lettertype niet heeft hij een andere moet gebruiken:

<h1 style="color: #000000; font-family: verdana, serif">Een tekst</h1>

Je kan ook de grote van de tekst bepalen dit doe je met font-size. De waarde is een getal in px(pixels) of pt(punten zoals in word). Vergeet niet erachter te zetten pt of px.

<h1 style="color: #000000; font-family: verdana, serif; font-size: 9px">Een tekst</h1>

Dan kan je ook nog de dikte van de tekst bepalen met font-weight. De waarde zijn: lighter, normal, bold en bolder.

<h1 style="color: #000000; font-family: verdana, serif; font-size: 9px, font-weight: bold">Een tekst</h1>

Ook schuin gedrukt kan natuurlijk in CSS bijvoorbeeld dit doe je met font-style. Font-style kan de volgende waardes hebben: italic en oblique.

<h1 style="color: #000000; font-family: verdana, serif; font-size: 9px; font-weight: bold; font-style: italic">Een tekst</h1>

Met css kan je ook teksten onderstrepen dit doe je met text-decoration de waardes zijn: underline, overline, line-through en blink.

<h1 style="color: #000000; font-family: verdana, serif; font-size: 9px; font-weight: bold; font-style: italic; text-decoration: underline">Een tekst</h1>

Je kan ook de tekst een achtergrond kleur geven met background-color. De waarde is of een hexadecimale kleur code of een voor gedefineerde kleur.

<h1 style="color: #000000; font-family: verdana, serif; font-size: 9px; font-weight: bold; font-style: italic; text-decoration: underline; background-color: green">Een tekst</h1>

Een voorbeeld van alles bij elkaar: