De basis van CSS
Nu we de syntax van CSS onder de knie hebben, gaan we eens kijken hoe we CSS kunnen gebruiken samen met de HTML die we eerder hebben geleerd. Dit doen we door:
- de CSS toe te voegen aan de webpagina;
- kijken naar het verschil tussen block-level en inline-level elementen;
- de verschillende lengte eenheden bekijken;
- en nemen we twee van de handigste CSS eigenschappen,
marginenpadding, onder de loep.
CSS toevoegen aan de webpagina
Aangezien HTML en CSS twee aparte talen zijn met allebei een apart doel, zou het niet raar zijn als je jezelf zou afvragen hoe deze twee samen gebruikt kunnen worden. Op deze vraag zijn twee antwoorden te geven:
- de CSS in een
STYLEelement toevoegen aan de pagina; - of de CSS opslaan in een apart bestand en d.m.v. het
LINKelement verwijzen naar de CSS.
In bijna alle gevallen is het beter om voor de tweede optie te gaan. Je kan namelijk
door de CSS in een apart bestand op te slaan de presentatie van jouw site regelen vanuit
één centraal punt. Als je zou kiezen om op elke pagina van jouw site
de CSS in een STYLE element te doen, dan zou je op alle pagina's dat
STYLE element moeten veranderen als je bijv. een ander lettertype wilt
gebruiken. Je begrijpt dus wel dat het veel makkelijker om de presentatie vanuit één
bestand te regelen.
Indien je kiest om toch het STYLE element te gebruiken, dan ziet dit
element er als volgt uit:
<style type="text/css">
/* Jouw CSS code */
</style>Zoals je ziet is het STYLE element makkelijk te gebruiken. Je geeft
d.m.v. het type attribuut aan dat de inhoud van het STYLE
element CSS code is. Vervolgens plak je gewoon jouw CSS in dit element en plaats je
het in het HEAD element.
Kies je ervoor om het LINK element te gebruiken om te linken naar
een extern CSS bestand, dan gebruiken we het LINK element als volgt:
<link rel="stylesheet" type="text/css" href="stylesheet.css">Het rel attribuut die de waarde stylesheet heeft, zegt
als ware tegen de browser dat de IRI (beter bekend
als URL) in het href
attribuut als stylesheet gezien moet worden, en dat deze
dus gebruikt moet worden om de pagina mee op te maken. Wederom geeft het
type attribuut aan dat we het over een CSS stylesheet hebben,
zoals we dit ook zagen bij het STYLE element.
Voeg je het LINK element in je HTML, dan ziet jouw HTML code er
dus ongeveer als volgt uit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<title>…</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<!-- De inhoud van je webpagina -->
</body>
</html>Block- en inline-level elementen
Voordat we met de echte CSS gaan beginnen, moeten we eerst begrijpen dat in CSS twee soorten elementen worden onderscheiden:
- block-level elementen;
- en inline-level elementen.
Block-level elementen zijn elementen die normaal eruit zien als een blok.
Neem bijvoorbeeld deze alinea. Deze alinea zit, vanzelfsprekend, in een
P element. Zoals je ziet zit er ruimte tussen deze alinea en de lijst
hierboven. Ook zien we een witregel tussen deze alinea en de alinea hieronder.
De volgende alinea begint dus niet gelijk achter het laatste punt van deze
alinea, maar begint op een nieuwe regel. Het P element zit dus
als het ware in een blok. Omdat deze elementen eruit zien als een blok
kunnen ze heel gemakkelijker worden gepositioneerd. Ook kan je bijvoorbeeld
d.m.v. de width en height eigenschappen de breedte
en de hoogte van een block-level element bepalen.
Inline-level elementen zijn elementen die simpelweg geen nieuw blok vormen.
Neem bijvoorbeeld deze link. De link vormt geen nieuw blok,
maar begint gelijk achter het laatste woord. Andere voorbeelden zijn de overige
tekst elementen die we zijn tegengekomen aan het einde van het hoofdstuk Tekststructuur. Echter, zoals zo vaak
zijn er toch uitzonderingen. De INS en
DEL elementen
zijn 2 speciale elementen. Dit zijn namelijk de enige twee elementen die én
block-level kunnen zijn, én inline-level. Dus als je ze bijvoorbeeld gebruikt
in een P element om alleen een paar regels tekst te groeperen,
dan worden ze behandeld als inline. Gebruik je ze om één of meerdere block
elementen te groeperen, dan moeten ze worden behandeld als block-level.
Waarom we elementen onderscheiden in block-level en inline-level wordt aan het einde van dit hoofdstuk duidelijk. Daar gaan we namelijk de grootte van een element aanpassen. Dit kan echter alleen worden gedaan met block-level elementen, dus is het handig om te weten welk element wel en welk element niet block-level is.
Lengte Eenheden
Zoals we in het vorige hoofdstuk zagen, kan de waarde van een eigenschap soms een lengte zijn. Bij een lengte denk je misschien gelijk aan meters of kilometers, maar aangezien beeldschermen niet zó groot zijn, houden we het in CSS bij de kleinere digitale meeteenheden:
ex;px;in;cm;mm;pt;- en
pc;
Zoals je ziet is dat een aardig groot aantal. Maar geen zorgen, we kijken alleen
maar naar px en em. Deze twee zijn namelijk de twee
populairste eenheden. De rest zal je niet of nauwelijks tegenkomen en mag je dus gelijk
vergeten.
Van px en em wordt px op dit moment nog
steeds het meest gebruikt. px staat voor pixel (beeldpunt) en is dus
gelijk aan één beeldpunt. Het gebruik van beeldpunten als eenheid werkt opzich goed
en is ook ondersteund door alle visuele browsers. Het wordt echter lastiger om mee
te werken als de gebruiker speciale eisen heeft. Zo kan de gebruiker namelijk willen
dat de lettergrootte groter moet worden dan dat die is omdat hij/zij misschien
slechtziend is. De gebruiker kan dan d.m.v. zijn browser de tekst handmatig groter
maken. Het effect wat dan optreedt is dat de tekst groter wordt, maar de layout
blijft dezelfde grootte. Hierdoor zou het kunnen dat door deze verandering de layout
uitelkaar valt. Dit probleem kent em echter niet.
em staat voor de breedte van de letter "m". Het voordeel hiervan is
dat de grootte van het em eenheid relatief is aan de lettergrootte.
Dus als we een rand hebben met de dikte van 0.3em, dan wordt de rand
dikker als de gebruiker de lettergrootte verandert naar een hoger getal. Hierdoor
zal het gebruik van de em eenheid ervoor zorgen dat je layout niet
uitelkaar valt en heeft het gebruik een positief effect op de gebruiksvriendelijkheid
van de layout.
De margin en padding
eigenschappen
Als laatste in dit hoofdstuk gaan we naar twee eigenschappen kijken:
margin en padding.
Deze twee eigenschappen creëren ruimte.
margin maakt ruimte aan de buitenkant van het element, en
padding aan de binnenkant. Dit klinkt allemaal een beetje
vaag, dus laten we het verduidelijken met twee voorbeelden. Het eerste voorbeeld
wat we hieronder ziet heeft extra margin, en het voorbeeld
daaronder geven we een overdosis aan padding. D.m.v. de zwarte rand er
omheen is goed te zien waar de extra ruimte zich nou bevindt; aan de binnen- of
buitenkant van het element.
Deze alinea heeft extra ruimte
aan de buitenkant (margin).
Deze alinea heeft extra ruimte
aan de binnenkant (padding).
Als we nu naar de CSS code gaan kijken voor de alinea met de extra ruimte
aan de buitenkant (margin), ziet die er als volgt uit:
p {
margin:2.5em;
}Je zal nu misschien afvragen wat je in hemelsnaam met de margin
en padding eigenschappen moet doen. Misschien dat het erg nutteloos
lijkt om extra ruimte te maken, maar margin en padding
zijn twee eigenschappen die erg van pas gaan komen bij het plaatsen van de
elementen op hun goede plek op de pagina waar jij ze wilt. Hoe dit precies te
werk gaat gaan we pas zien in het allerlaatste hoofdstuk waar gekeken wordt hoe
de HTML en CSS van Modern Markup is opgebouwd. Maar eerst gaan we onze kennis van
CSS uitbreiden door te kijken naar een aantal eigenschappen die je kan gebruiken
voor het opmaken van een pagina »