CSS aan HTML koppelen

menu

Er zijn drie manieren om CSS in je HTML pagina's te krijgen:
  1. maak een externe stylesheet en koppel deze aan je HTML document.
    Dit geeft een consequente vormgeving over de hele site en is efficiënt bij het aanpassen van de vormgeving van een site als deze heel veel pagina's heeft.
  2. maak een stylesheet in het document zelf: dit is dan een interne stylesheet. Voor de vormgeving van een enkele pagina maakt dat geen verschil. De stylsheet staat in de head van de HTML-pagina en de inhoud staat natuurlijk in de body van de HTML-pagina. Je kunt dit vergelijken met typogrammen in InDesign en het werken met opmaakstijlen in MS-Word.
  3. verander de stijl in een enkele HTML-tag. Zo heb je dan uitgebreidere opmaak mogleijkheden dan met alleen HTML-code, maar omdat er geen echte scheiding tussen de inhoud en de vormgeving is, zal een aanpassing van de vormgeving van de hele site niet handig zijn als je elke HTML-tag afmoet om de wijziging door te voeren.
De HTML-standaard die hiervoor is kan voor betere typografische wensen worden uitgebreid met CSS: Cascading Style Sheets. Door deze uitbreiding hebben we meer greep op de wijze waarop de tekst en andere elementen worden gepresenteerd. CSS is iets anders dan HTML, de code is anders opgebouwd maar het kan in HTML worden gekoppeld of worden ingebouwd.

een extern stylesheet: een koppeling van een CSS-document aan een HTML-pagina

Je kunt in aan apart bestand de stijldefinities vermelden en dit opslaan met de extensie *.css. In elk HTML-document dat van de stijlopmaak dan gebruik moet maken, koppel je met de volgende code tussen de head-tags het stijldocument: 
<html>
<head>
	<title>hier de titel van je document</title>
	
<link rel="STYLESHEET" href="naam_vh_document.css" type="text/css">
	
</head>
<body>
hier komt dan de inhoud van je hele pagina.............
 .
 .
 .
 </body>
 </html>
De naam van het document is dan ingevuld bij het attribuut href Het mooie van deze methode is dat met het aanpassen van een enkele stylesheet alle verbonden pagina's worden vormgegeven. Hierdoor Het stijldocument met de naam naam_vh_document.css heeft dan bijvoorbeeld de volgende inhoud: 
body
	{ font-family: arial, helvetica, sans-serif;
	font-size: 12pt;
	line-height: 14pt;
}

h3 {
	margin-left: 25pt;
	line-height: 19pt;
	}
Hierbij zie je eerst de naam van de HTML-tag waarop de stijl betrekking heeft en vervolgens tussen de accolades de stijldeclaraties. Een stijldecralatie begint met een kenmerk(bijvoorbeeld margin-left) daarachter de dubbele punt, vervolgens de waarde (bijvoorbeeld 25pt) gevolgd door de punt-komma.

intern stylesheet: koppeling in het document zelf

Een andere manier van koppelen is het het opnemen van de stijldefinities tussen de headtags in het document zelf. Hierbij worden de stijldefinities in het document zelf opgenomen, wat natuurlijk handig is als je de definities alleen maar wilt laten gelden voor de pagina zelf. 
<html>
  <head>
<title>inleiding CSS</title>

<style type="text/css">
	<!--
	body {
		color: #3366FF;
	}
	
	h1{
	color: #CC0000;
	background-image: url(PATROON.GIF);
	padding: 20px;
	
	}
	pre {
	background-color: #ccffcc;
	margin: 5px;
	color: #000000;
	padding: 15px;
	margin-left: 15px;
	margin-right: 50px;
	border-top: 8px ridge #00CC33;
	border-right: 8px ridge #009966;
	border-bottom: 8px ridge #00cc33;
	border-left: 8px ridge #009933;
	}
	-->
	</style>
</head>
  <body>
    hier komt dan de inhoud van je hele pagina.............
    .
    .
    .
 </body>
</html>

stijldeclaratie in een enkele HTML tag inbouwen

Je kunt zelfs in een enkele HTML-tag de stijl met CSS bepalen, bijvoorbeeld in de volgende P-tag: 
<P STYLE="color: red;">De tekstkleur in deze paragraaf is rood.</P>
Dit gebruik je als je incidenteel CSS wilt toepassen. (Merk op dat STYLE hier een attribuut is geworden -bij P- in tegenstelling het voorgaande voorbeeld waar STYLE een tag is.) Omdat je in de tag zelf de stijl definieert, zijn de vormgeving en de inhoud niet gescheiden. Wijzigingen van de vormgeving worden zo onoverzichtelijk en moeizaam. De kans op inconsequentie in de vormgeving neemt toe.
nog meer om CSS en HTML te koppelen.

specifieker tags selecteren

In de CSS code hierboven wordt voor de accolade aangegeven op welke tag in de HTML de stijldefinites moeten worden toegepast. We noemen dat de selector.
Bijvoorbeeld :

 p {
stijldefinitie;
stijldefinitie;
}

De stijldefinities gelden nu voor elke inhoud, die door de <P> en </P> omgeven wordt. Maar het kan zijn dat een andere paragraaf een andere stijltag wilt geven. Dit kan door CLASSES te gebruiken. 

  <head>
<title>inleiding CSS</title>

<style type="text/css">
	<!--
	p { font-family: arial,helveticat,sans-serif;
}
.mooier { color: #aa0000;
}
	-->
	</style>
</head>

<body>
<p> dit is tekst</p>
<p class="mooier">deze tekst wordt rood.</p>

Dit geeft in beide paragrafen hetzelfde lettertype, maar in de tweede wel een rode tekst, terwijl dat in de eerste niet zal zijn.