Css koppelen aan html.
Bron: http://www.sceneone.nl/algemeen/koppeling.php
Titel: HTML en CSS tutorials
Auteur: Wybe Weysters
Css en html zijn 2 talen die los van elkaar staan. Dat is natuurlijk ook de bedoeling. Het is immers de
bedoeling om structuur (html) en presentatie (css) van elkaar te scheiden.
Voor een goede samenwerking tussen html en css is het belangrijk dat die twee als het
ware van elkaars bestaan op de hoogte zijn. Ze moeten aan elkaar gekoppeld worden.
Er zijn 3 manieren om css en html met elkaar te verbinden:
het stylesheet
Wat mij betreft is het werken met een stylesheet de beste manier om met css (cascading style sheet) te
werken. Je hebt op die manier de html en de css volledig van elkaar gescheiden in aparte bestanden.
Het stylesheet aan je html pagina koppelen doe je door middel van 1 eenvoudig regeltje code tussen de
<head> tags van je pagina:
XHTML: <link href="jouw_stylesheet.css" rel="stylesheet" type="text/css"
/>
HTML: <link href="jouw_stylesheet.css" rel="stylesheet" type="text/css">
een style block
Bij de inline style hieronder beschrijf ik mijn bezwaren tegen die inline style. Deze bezwaren gelden
in mindere mate voor het gebruik van het style block ook. Toch zul je in de toekomst misschien wel situaties
tegenkomen waarin het gebruik van een style block erg handig is.
Je plaats een stijl blok altijd tussen de <head> tags van je pagina, op de volgende manier:
HTML: <style type="text/css">
p{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF6600;
border: 1px solid #CCCCCC;
font-size: 90%;
text-align: center;
}
blockquote{
font-family; verdana, helvetica, arial, sans-serif
background: #999999;
color: #000000;
border: 1px solid #000000;
font-size: 100%;
}
</style>
de inline style
Je verwerkt de stijldeclaratie in het html element waarop de stijl betrekking heeft. Deze methode vermeld ik hier voor de volledigheid, maar wat mij betreft vergeet je hem meteen weer. Wat heb je aan deze manier van werken met css? Was het nou juist niet de bedoeling om de structuur (de html) te scheiden van de presentatie (de css)? Op deze manier is het volledig met elkaar verweven. Daarmee ontneem je de css zijn kracht en vervuil je de html. Maar goed, voor de volledigheid:
HTML: <p style="color: #999999; text-decoration: underline; font-weight: bold;">Dit
betekent dus dat de tekst van deze paragraaf grijs van kleur, onderlijnd en vetgedrukt is</p>
Wanneer je toch besluit om van de 'inline style' gebruik te maken moet je dat in je meta tags even laten weten:
XHTML: <META HTTP-EQUIV="content-style-type" CONTENT="text/css" />
HTML: <META HTTP-EQUIV="content-style-type" CONTENT="text/css">