CSS

CSS is een opmaaktaal die je gebruikt in combinatie met HTML. HTML is voornamelijk voor de structuur, en CSS echt voor de opmaak.
Bijvoorbeeld: met HTML zeg je, deze header moet hier komen te staan. Met CSS zeg je dan: deze header moet blauwe tekst en een lichtblauwe achtergrondkleur hebben.

In codes uitgelegt:

<style />
h2 {
	 color: #000099;
	 background-color: #66CCCC;
	 }
</style />

<h2>Header</h2>

De basisregels
Uitgaande van het hierboven gegeven voorbeeld zal ik de basisregels van CSS uitleggen.

  1. CSS moet tussen een <style> en </style> komen te staan.
  2. CSS heeft een vaste structuur: tag {eigenschap: waarde;}. Bij het voorbeeld is dit h2 {color: #000099;}.
  3. Eigenschappen en waardes komen tussen accolades ( { } ). Kijk hier voor een overzicht van alle eigenschappen.
  4. Elke waarde wordt afgesloten met een puntkomma ( ; ).
  5. Meerdere eigenschappen kun je achter elkaar neerzetten, gescheiden door een puntkomma. h2 {color: #000099; background-color: #66CCCC;}

Tags, ID's en CLASS
In het gegeven voorbeeld hebben nu alle h2's op die pagina een blauwe achtergrond. Dit is de zogenaamde site-wide tag. Alle tags die je op deze manier definieert, nemen die vorm aan. Dit is erg handig als je op je hele pagina de tekst rood wilt kleuren.

Maar als je alleen maar bepaalde h2's blauw wilt kleuren, moet je gebruik gaan maken van ID's en CLASS.

  • ID's gebruik je als je één tag bepaalde eigenschappen wilt geven.
  • Als je meerdere tags dezelfde eigenschappen wilt geven, gebruik je CLASS.
Stel, je wilt één ongeordende lijst een rood lettertype geven. Je maakt dan eerst een ID en geeft deze een naam.
Een ID maak je door eerst een hekje ( # ) neer te zetten, en vervolgens een naam (geen spaties!).
<style />
#rood { color: #FF0000;}
</style />
In de HTML doe je vervolgens dit:
<ul id="rood">
<li>Item</li>
</ul>

Als je een CLASS wilt maken, doe je het volgende:

<style />
.rood { color: #FF0000;}
</style />
In de HTML doe je vervolgens dit:
<ul class="rood">
<li>Item</li>
</ul>

Hiërarchie
Een ID gebruik je dus als je een eigenschap één keer wilt gebruiken, en een CLASS als je hem meerdere keren wilt gebruiken. Site-wide gebruik je alleen als je zeker weet dat je alle tags die eigenschap wilt geven.
Overigens is er ook nog een hiërarchie hier in: ID en CLASS gaan boven site-wide. Dus als je site-wide aangeeft dat links blauw van kleur moeten zijn, maar je zegt tegen één link dat hij paars moet zijn, dan kan dat. Dat ziet er dan zo uit:

<style />
a:link { color: #0000FF;}
#paars {color: #6600666;}
</style />
<body>
<a href="http://www.gildegids.nl">Link blauw</a>
<a href="http://www.gildegids.nl" id="paars">Link paars</a>
</body>

Gebruik geen meerdere styles
Een fout die ik nog vaak tegenkom, is dat men voor iedere CSS-tag een aparte style aanmaakt. Maar dit hoeft niet! Alle CSS kun je onder één style samenvoegen.
Dus dit:

<style />
body {background:URL(http://images.neopets.com/new_shopkeepers/632.gif);}
</style />
<style />
.hrblauw { 
	color: #0000FF; 
	background-color: #0000FF;}
</style />
<style />
font { 	font-family: verdana, arial, sans-serif;
	font-size: 10px; 
	font-style: italic;}
</style />

Kan samengevat worden als dit:
<style />
body {background:URL(http://images.neopets.com/new_shopkeepers/632.gif);}
.hrblauw { 
	color: #0000FF; 
	background-color: #0000FF;}
font { font-family: verdana, arial, sans-serif; 
	font-size: 10px; 
	font-style: italic;}
</style />

Verder naar Links