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:

De 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 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. Als je stylesheet "styles.css" heet ziet het er zo uit:

HTML: <link rel="stylesheet" href="styles.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 (met CSS daaraan toegevoegd): <style >
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 juist niet de bedoeling om de structuur (HTML) te scheiden van de presentatie (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 (met CSS daaraan toegevoegd): <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>

naar het begin van de pagina