HTML les 11 – Het maken van Stijlbladen 5

We kunnen nu stijlbladen maken, maar nu wil je graag weten welke stijlen er zoal zijn. In de cursus stijlen 2
zag je een overzicht van alle stijlen, maar in deze cursus gaan we wat praktische toepassingen maken.

Stijlen voor de body

In de body kunnen wat belangrijke stijlen geplaatst worden als background (achtergrondkleur), color (tekstkleur)
en font-family (lettertype). Daarnaast komen onder de body de stijlen voor links te staan, met : ervoor.
Een voorbeeld:

 body { background: yellow; font-family: verdana;}
    :link { color: red; }
    :active { color: green; }
    :visited { color: black; }
    :hover { color: #ff0000; }

Hier kun je ook een hover in verwerken, een actie als je met de muis over een link gaat.

Stijl voor lettergrootte

Met de eigenschap font-size kun je de lettergrootte bepalen. Je moet dan een waarde meegeven, dat kan op
drie manieren, met punten (pt), met percentage (%) of met een omschrijving. Van alledrie volgt een voorbeeld.

– Punten

{font-size: 24pt; }

De letter wordt 24 punten groot, dit getal kun je naar eigen inzicht aanpassen.

– Percentage

{font-size: 160%; }

De letter wordt 60% groter dan de andere tekst. Geef altjd een totaalpercentage.

– Omschrijving

{font-size: xx-large; }

De letter wordt heel erg groot, hierbij kun je de volgende omschrijvingen gebruiken:

xx-large (heel erg groot), x-large (erg groot), large (groot), medium (normaal), small (klein), x-small
(erg klein), xx-small (heel erg klein), larger (groter) en smaller (kleiner).

Stijlen voor lettertypes

Voor lettertypes zijn er een aantal stijlen beschikbaar. Je hebt ten eerste

font-family
Hierna volgt een lijst met namen van lettertypes. Het eerste dat door de browser wordt
gevonden wordt gebruikt.
Eventueel kun je een aantal algemene kenmerken toevoegen als: Serif, sans-serif, cursive,
fantasy of monospace.

font-weight
normal, bold, bolder, lighter of een getal tussen 100 en 900. Al naar gelang de vetheid van de letter.

Kleurstijlen

Hieronder een overzicht van de verschillende stijlen voor kleuren.

color:
Bepaalt de tekstkleur
background-color:
Achtergrondkleur
background-image:
Achtergrondafbeelding
background-repeat:
Geeft aan of een achtergrond herhaalt moet worden.
background-attachment:
‘Scroll’ of ‘fixed’ bepaalt of de afbeelding meescrollt of niet.
background-position:
Geeft de posite van de achtergrond aan met behulp van een percentage, lengte
of de woorden
top, center of bottom voor de eerste waarde,
en left, center, right voor de tweede waarde.

Stijlen voor een ‘box’

Elk element kan in CSS een ‘box’ hebben. Dat wil zoveel zeggen dat ieder element in een doosje sit, waaraan je allerlei
waardes kunt toevoegen over hoe die ‘box’eruit ziet. ‘Padding’ is de opvulling, ‘border’ is de rand, en ‘margin’
is de marge om de rand heen. Je kunt dit voor elke zijde bepalen, left (links), right (rechts),
top (boven), bottom (beneden). Als je een waarde geeft, bijvoorbeeld 5px, dan geldt dit voor alle zijden.