Zoals je misschien al wel gemerkt hebt, is HTML niet heel uitgebreid in de mogelijkheden om een document vorm te geven. Daarvoor is CSS in het leven geroepen.
CSS staat voor Cascading Style Sheets, en het gebruik ervan heeft een groot voordeel: De vormgeving van een webpagina wordt ermee losgekoppeld van de eigenlijke inhoud, de tekst en afbeeldingen. Daardoor wordt onder andere de code van je website overzichtelijker en kun je werk en ruimte besparen.
CSS kun je in een HTML-document definiëren maar je kunt het ook in een apart bestand opslaan en vervolgens koppelen in het <head></head> gedeelte van je webpagina. Als laatste kun je het ook direct in een tag invoeren.
- Invoegen van CSS doe je direct in de HTML-code met <style type=”text/css”></style>
- Linken naar een extern css-bestand doe je zo, in het <head> gedeelte: <link rel=”stylesheet” type=”text/css” href=”bestand.css” />
- Direct in een tag invoeren met het attribuut style=””
Een simpel voorbeeld van CSS geeft al direct aan hoe krachtig het kan werken.
body {
font-size:10px;
}
Dit stukje CSS zegt dat alle tekst in de tag <body> een lettergrootte van 10 pixels moet hebben. Omdat CSS werkt met behulp van erving, zullen alle tags in de <body> dus een lettergrootte van 10 pixels meekrijgen en hoef je de lettergrootte niet voor elk gedeelte apart te definiëren De enige manier om daarvan af te wijken is door bijvoorbeeld een bepaalde sectie in de body een afwijkende grootte mee te geven, stel je hebt een header-div: <div class=”header”>Met wat tekst er in</div>. Normaal zou de tekst 10 pixels groot zijn, maar met deze CSS-code zou je ervoor kunnen zorgen dat die tekst alsnog groter wordt:
div.header {
font-size:12px;
}
Hiermee ben je ook al direct in aanraking gekomen met het concept ‘klasse’. Je kunt namelijk een tag een zelfverzonnen class-attribuut meegeven, zoals ik gedaan heb met class=”header”. Hierdoor kun je een grotere verscheidenheid aanbrengen in verschillende tags en ze eenvoudig vormgeven. Heb je bijvoorbeeld twee lijsten op een pagina, en wil je ze in bepaalde dingen laten overeenkomen, maar in enkele dingen ook van elkaar verschillen, dan kun je dat als volgt oplossen:
ul {
font-size:8px;
font-weight:bold;
}
ul.oranje {
color:#FF7F2A;
}
ul.blauw {
color:#2A55FF;
}
Deze code zorgt ervoor dat alle <ul>-lijsten een lettergrootte van 8 pixels krijgen en vetgedrukt worden. De <ul> met class oranje krijgt daarnaast nog een oranjegekleurd lettertype, de ul met class=”blauw” krijgt een blauw lettertype.
Hiermee heb je kennis gemaakt met de basis van CSS. Wil je hier meer over leren? Op deze handige website kun je zelf aan de slag met CSS.