CSS voor beginners

Na een artikel over HTML voor beginners is het nu dan tijd voor een artikel over CSS voor beginners. We behandelen hierin kort wat CSS is, waarom je CSS gebruikt, hoe je het gebruikt en uiteraard dit alles vergezeld van voorbeelden, zodat je er lekker mee aan de slag kunt.

Wat is CSS

CSS staat voor Cascading StyleSheets. Kort gezegd bepaal je met CSS de opmaak van je HTML pagina. De HTML is voor de structuur (kopjes, paragrafen, lijsten etc.) en de CSS is voor het uiterlijk. Je kunt dus de kleur, grootte, lettertype van je kopjes e.d. bepalen.

Waarom CSS

Waarom zou ik CSS gebruiken? Ik kan toch mijn teksten al opmaken d.m.v. de <font> tag? Ja dat kan, maar dat mag niet meer :-). Zoals ik al zei is HTML voor de structuur van je pagina en gebruik je het dus niet voor de opmaak. Met HTML geef je bijvoorbeeld aan wat een koptekst is en wat een gewone paragraaf is. Wil je die koptekst een bepaalde kleur of lettertype geven? Dan kun je CSS gebruiken. Het is dus belangrijk dat je opmaak en structuur gescheiden houdt.

Hoe gebruik ik CSS

Je kunt CSS op meerdere manieren gebruiken in je webpagina. Dit kan door een extern bestand te koppelen aan je HTML pagina of door de CSS in de HTML pagina direct te gebruiken. We zullen allebei de methoden hier behandelen, maar de voorkeur gaat uit naar de eerste. Waarom? Omdat we net zeiden dat we structuur en opmaak gescheiden willen houden. En hoe kun je het nou beter scheiden dan door het in aparte bestanden onder te brengen.

Externe stylesheet

CSS in een apart bestand noemen we de stylesheet en wordt opgeslagen met de .css extensie, bijvoorbeeld style.css. In de HTML pagina kun je dit bestand als volgt koppelen:

<link rel="stylesheet" type="text/css" href="style.css">

Bovenstaande regel plaats je vervolgens tussen de <head> tags. Even een klein voorbeeldje van een HTML pagina met een stylesheet gekoppeld.

De HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>CSS voor beginners test</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>CSS voor beginners</h1>
<p>Dit is een voorbeeld paragraaf met een <a href="http://netters.nl/" title="Netters.nl">rode link</a> erin.</p>

</body>
</html>

Zonder CSS zou deze HTML er niet zo mooi uitzien. Nu zetten we onderstaande code in het style.css bestand:

body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
}
h1 {
	color: blue;
	font-weight: bold;
}
p {
	margin-bottom 1em;
}
a {
	color: red;
}

En dat geeft dit resultaat. Even een uitleg:

Je ziet dat de CSS is opgebouwd uit een HTML element (bijvoorbeeld 'body' of 'h1') gevolgd door tekst tussen accolades: { en }. Het gedeelte van het HTML element noemen we de 'selector'. Hiermee geef je aan voor welke HTML elementen je de stijl wilt toepassen. Wil je hier meer over weten, lees dan het artikel over CSS selectors.

Tussen de accolades staan vervolgens de CSS 'attributen'. Bij 'body' zie je dat we daar het lettertype Verdana meegeven. Kent de computer van de gebruiker het lettertype niet, dan probeert hij Arial toe te passen en anders het standaard sans-serif (schreefloos) lettertype. Vervolgens wordt een tekstgrootte van 11 pixels gedefinieerd. Dit is dus van toepassing op alles wat binnen de body tags staat, eigenlijk alles dus aangezien tussen deze tags alle overige HTML moet komen. De h1 elementen geven we vervolgens een blauwe kleur mee en maken we vet. De paragrafen (p) krijgen een marge (witruimte) van 1 em (1em = 1 regelhoogte) mee aan de onderkant. De links worden rood gekleurd.

Interne styles

In plaats van de CSS in een apart bestand op te nemen kun je dit ook binnen de HTML zelf plaatsen. Dit kan op twee manieren. Je kan alle CSS plaatsen tussen <style> tags die je vervolgens tussen de <head> zet of je geeft de stijlen per element mee met het attribuut style="". Van allebei even een voorbeeld.

Tussen <style> tags:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>CSS voor beginners test</title>
	<style type="text/css">
		body {
			font-family: Verdana, Arial, sans-serif;
			font-size: 11px;
		}
		h1 {
			color: blue;
			font-weight: bold;
		}
		p {
			margin-bottom: 1em;
		}
		a {
			color: red;
		}
	</style>
</head>
<body>

<h1>CSS voor beginners</h1>
<p>Dit is een voorbeeld paragraaf met een <a href="http://netters.nl/" title="Netters.nl">rode link</a> erin.</p>

</body>
</html>
<code>
<p>Per element:</p>
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>CSS voor beginners test</title>
</head>
<body>

<h1 style="color: blue;">CSS voor beginners</h1>
<p style="margin-bottom: 1em;">Dit is een voorbeeld paragraaf met een <a href="http://netters.nl/" title="Netters.nl">rode link</a> erin.</p>

</body>
</html>

Zo, dit was even een korte introductie in CSS. Ik hoop dat je het een beetje hebt kunnen volgen en ik hoop nog meer dat je er veel gebruik van zult gaan maken. Mocht je nog vragen hebben dan kan je die altijd stellen in het forum.

Netters.nl

Navigatie

Recente bloginzendingen

Actuele vacatures

Gebruikerslogin

Zoeken

Nu online

Actieve forum onderwerpen

Enquête

Wie is nieuw

Wat is CSS

Waarom CSS

Hoe gebruik ik CSS

Externe stylesheet

Interne styles