Positioneren met CSS
We hebben nu gezien hoe we de propertys aanspreken vanuit HTML. Voordat de HTML pagina dit kan doen moet ze verbonden worden alle CSS stijlen. Dit kan via 2 verschillende bronnen.
Eerst en vooral onderscheiden we:
Interne CSS
Interne CSS wil zeggen dat je de opmaaktaal zelf terug vindt in het document. Dit is handig als je snel een document moet opmaken. Als je natuurlijk een volledige site dezelfde opmaak moet geven valt dit voordeel vast en zal je een externe CSS bron gebruiken. Maar hier onderscheiden we terug 2 varianten.
Inline CSS
Hierbij wijzen we rechtstreeks de opmaak toe aan de inhoud van een bepaalde HTML-tag in de tag zelf. Het nadeel hiervan is dat we zo vele voordelen verliezen van CSS omdat we hierdoor een stap terugzetten naar vroeger waar de opmaak ook zo werd toegewezen. Dit is dus wel handig voor een kleine aanpassing of als deze opmaak maar voor 1 document gebruikt hoeft te worden.
In de tag gebruiken we style=””. Hierin schrijven we de nodige propertys en de waarden. Opgelet de syntax regels blijven behouden!
HTML syntax:
<head>
<style type=”text/css”>
body {background-color: blue}
p {font-weight: bold;}
</style>
</head>
Stijl tag
We kunnen ook een apparte HTML-tag <style> gebruiken die we in de <head> plaatsen. Deze bevat dan alle stijlen die we kunnen gebruiken in het document. Het nadeel hiervan is dat we terug maar 1 document kunnen koppelen aan deze stijlen. We moeten hierbij wel nog het type meegeven aan de style-tag zoals je kan zien in het voorbeeld.
HTML syntax:
<head>
<link rel=”stylesheet” type=”text/css” href=”opmaak.css”>
</head>
Externe CSS
Bij het gebruik van externe CSS bestanden gebruiken we de voordelen van CSS optimaal. Nu kunnen we verschillende paginas linken naar dat ene bestand. Een css bestand word ook een “extern style sheet” genoemd. Dit bestand is een zuiver tekstbestand die je kan schrijven met notepad. Je moet er wel de extensie .css aantoevoegen zodat het duidelijk om een CSS bestand gaat. De link naar dit bestand bevindt zich in de <head> van het HTML document.
HTML syntax:
<head>
<link rel=”stylesheet” type=”text/css” href=”opmaak.css”> </head>
Opgelet:
Je kan deze verschillende methodes ook door elkaar gebruiken maar de methode het dichts bij de op te maken tag heeft
voorrang. De algemene regel is dus dat Inline CSS voorrang heeft op een Stijl tag en deze
op zijn beurt voorrang heeft op het externe CSS bestand.
