gestructureerd opmaken van sites

Met het gebruik van CSS kun je alle pagina's van een site in een keer opmaken, of de opmaak wijzigen. Bij het invoeren van de verschillende pagina's van de site geef je alleen maar aan welke stukken teksten koppen zijn door ze te voorzien van de tags <H1> en </H1> of <H2> en </H2> of <B> en </B> etc., Natuurlijk komen <BODY> en </BODY> ook in elk HTML-document voor.
Bovenin tussen de <HEAD> en de </HEAD> staat al de <TITLE> en </TITLE> tags. In deze heading voeg je de volgende LINK-tag toe:

<LINK REL="STYLESHEET" HREF="mijn_styl.css" TYPE="text/css">

Hierbij verwijs je dan naar een stylesheet met de naam mijn_styl.css.

voordelen

Er zijn zo al 3 voordelen te noemen van deze methode van werken:

efficiëntie
Door deze werkwijze kun je tegelijkertijd de opmaak van alle pagina's in jouw site tegelijk veranderen. Veel sites bestaan uit een heleboel verschillende pagina's en zo kun je al deze pagina's tegelijk aanpassen. Stel je voor dat je de opmaak van alle koppen moet veranderen in 20 pagina's. Met een style-sheet kun je dat in een keer doen.
consitentie
De opmaak van alle pagina's in jouw site zijn consistent. Er is een eenduidige opmaak van alle pagina's.
meer mogelijkheden
Je beschikt over een uitgebreidere set van opmaakmogelijkheden dan met een staandaardmanier van opmaken. Je hebt mogelijkheden om de letters groter te maken of om een verloopje op de achtergrond te plaatsen. Dit verloopje is in een beeldbewerkingspakket getekend en met CSS achter de koppen geplaatst. Er is zelfs een manier om een achtergrondplaatje in de body te plaatsen, zonder dat die zich herhaald.
Dit laatste voordeel is overigens geldig voor alle manieren waarbij van CSS gebruik wordt gemaakt.

De code van CSS opmaak code verschilt wel enigszins van HTML-code hieronder de code van mijn_styl.css:

BODY {font-family: Arial, Helvetica;
	color: #000000;
	font-size: 15px;
	margin-left: 80px;
	margin-right: 50px;
	}

H1	 { color: #ffffff; 
	font-variant: small-caps; 
	font-size: 35px; background: 
	#0099cc url(achtergrond.gif) repeat-y; 
	text-align: center; 
	position: relative;
	margin-left: -40px;
	margin-right: 30px; }


H2	 { color: #0000ff; 
	font-size: 12px; 
	background: #0099cc url(achtergrond2.gif) repeat-y; 
	text-align: right }

H3	 { color: #0000ff; 
	font-size: 10px; 
	background: #0099cc url(achtergrond2.gif) repeat-y; 
	text-align: left }

LI {	margin-left: 20px;
	}
	
I	{color: #990000;
	text-decoration: none;
	}


A	{color: #0080ff;
	text-decoration: none;
	}


A:hover 	{text-decoration: underline;
		color: 990000;
		}


IMG	{
	 background-color: #0099cc;
	border-color: #993333;
	}



OL	{color: #006600;
	text-decoration: none;
	}


UL	{color: #006600;
	text-decoration: none;
	}

Je ziet dat er voor elke tag, die je wilt opmaken genoemd wordt, daarachter tussen de accolades alle bijzonderheden. Elke bijzonderheid wordt door een ; afgesloten.
Je hoeft in alle pagina's van je site alleen maar naar dit document te linken en de opmaak is geregeld!
Wli je de opmaak wijzigen? Wijzig dan in mijn_styl.css!

terug

gestructureerd opmaken van sites

voordelen

efficiëntie

consitentie

meer mogelijkheden