Wat op deze pagina opvalt is uiteraard de aanwezigheid van CSS. De CSS wordt
natuurlijk toegevoegd d.m.v. het LINK element die in de
HEAD komt, zoals we al zagen in het hoofdstuk De Basis van CSS. Het LINK
element van deze pagina ziet er als volgt uit:
<link rel="stylesheet" type="text/css" href="stap3.css">Nu we dat gedaan hebben, kunnen we beginnen met de CSS. Zoals je ziet lijkt
deze pagina nogal erg inelkaar geduwd. Ik vind het namelijk persoonlijk altijd
handig om helemaal bovenaan de CSS te beginnen door aan te geven dat elk element
geen margin en padding heeft. Dit doe ik omdat dit
veel probleem met de verschillende browsers voorkomt. Zo gebruikt Opera namelijk
het padding eigenschap om lijsten zoals het menu wat hierboven
staat een stukje naar links te duwen. De andere browsers gebruiken echter
margin. Indien je dit niet weet kan je daar helemaal op vast
lopen, dus voorkom ik dat liever d.m.v. de volgende code:
* {
margin:0;
padding:0;
}Zoals je ziet hebben we het * karakter gebruikt. Dat karakter
betekent dat het voor elk HTML element geldt.
Verder is ook aangegeven welk lettertype we willen gebruiken. Dat geven we
aan in voor het HTML element aangezien het het dan voor de gehele
pagina geldt. We hadden er ook voor kunnen kiezen om wederom de *
selector te gebruiken, maar dan komen we in de knoei met de lettergrootte.
Bekijk maar de CSS code die we gebruiken voor het HTML element:
html {
padding:1.5em;
background:#FFF;
font:0.75em Trebuchet MS,Helvetica,Arial,sans-serif;
color:#333;
}Zoals je ziet gebruiken we de grootte 0.75em. em is
een relatieve eenheid, dus als we de lettergrootte zouden aangeven d.m.v. de
* selector, dan zou de lettergrootte van een element 75% zijn van
het element waar het in zit.
Dus stel, we hebben een pagina waarin we een P element hebben
die in de BODY zit, die op zijn beurt weer deel uitmaakt van het
HTML element. Dan zou de lettergrootte van het P
element dus 75% zijn van die van het BODY element. Maar de
lettergrootte van het BODY element zou dan weer 75% zijn van die
van het HTML element. Uiteindelijk zou dus de lettergrootte van het
P gelijk zijn aan 0.75 * 0.75 * 0.75 = 0.42em. Daarom geven we de
lettergrootte aan in het HTML element.
Verder zie je ook dat we de kleur van de tekst #333 hebben
gemaakt en de achtergrondkleur helemaal wit. Het is aangeraden om altijd de
kleur van de tekst en de achtergrond aan te geven. Ookal maakt je pagina gebruik
van een witte achtergrond en zwarte tekst. Je kan er namelijk nooit vanuit gaan
dat de gebruiken standaard deze kleuren gebruiken voor hun tekst en achtergrond.
Zo kan je bijvoorbeeld in Firefox instellen dat je een groene achtergrond wilt.
Vergeet je dus de achtergrondkleur in te stellen, dan gaat jouw pagina er voor
die gebruiker nogal raar uitzien.
Als laatste hebben we dan nog het padding eigenschap over, die
dus zorgt voor wat ruimte om de hele pagina heen. Zo ziet de pagina niet
vastgekleeft aan de randen van de browser.
Nu we de basis achter de rug hebben, gaan we maar eens beginnen met het echte werk: het opmaken van de zwarte balk met daarin het logo en het zoekveld in de top.
Copyright © 2006 Modern Markup. Alle rechten voorbehouden.