You may want to put some text here

CSS Reset bestand

Als je een CSS website maakt dan vergeten veel webdevelopers eerst alle margins, paddings enzoverder te resetten. De CSS bepaalde volledig de layout van je website en als deze vanaf het begin al niet gelijk is in de verschillende browsers dan ben je gedoemd om in de problemen te komen.

Aangezien elke browser default verschillende margins, paddings en andere attributen meegeeft aan de verschillende elementen is het resetten hiervan noodzakelijk. Het bouwen van een website zonder een CSS reset kan je dus vergelijken met het bouwen van een huis op een scheve fundering.

Om even visueel te laten zien hoe groot het verschil is heb ik een klein html bestandje gemaakt met volgende code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ComputerFAQ CSS Reset</title>
<style type="text/css">
<!--
.wrapper {
width: 300px;
border: 1px #CCCCCC solid;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<h1><strong>Lorem Ipsum</strong></h1>
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give.</p>
<h1><strong>Lorem Ipsum</strong></h1>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
</body>
</html>

Van het resultaat van deze code heb ik een screenshot in Firefox en IE(Internet Explorer 7) gemaakt. Deze 2 screenshots heb ik juist overeen geplakt en één van de twee screenshots heb ik op 50% doorzichtigheid gezet. Zo kan je zien hoeveel de 2 browsers verschillen zonder een CSS reset.


Het resultaat is gewoon nog erger dan ik zelf gedacht had :p. Wat ik nu ga doen is de volgende CSS code toevoegen. Als je de CSS overloopt dan zal je zien dat ik alleen maar wat vaste waardes ga geven aan HTML elementen. Deze waardes zullen de browser defaults overschrijven wat resulteert in een veel beter resultaat.

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,ol, li, dl, dt, dd, form, a, fieldset, input, th, td{
margin: 0;
padding: 0;
border: 0;
outline: none;
}
body{
font-size: 88%;
line-height: 1;
}

h1, h2, h3, h4, h5, h6{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol{
list-style-image: none;
list-style-type: none;
}

img{
border: 0;
}

Het resultaat na het toevoegen van deze korte CSS code ziet er als volgt uit.


Nu dat je weet waarvoor een CSS reset dient kan je hem best altijd gebruiken. Sla de CSS code van hierboven op in een CSS bestandje met de naam reset.css. Telkens als je een nieuwe website begint, include je eerst het reset.css bestand. De CSS voor je website zelf zet je dan in een ander bestand en include je na reset.css.

De head van je HTML bestand zal er dan als volgt uitzien.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ComputerFAQ Reset CSS</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

The Author of this post is Wim Mostmans

Wim Mostmans heeft een eigen webontwikkeling bedrijf Sitebase waar hij voltijds voor werkt. Hij beheert ook nog enkele websites waaronder deze en een Computerforum. Blijf op de hoogte van waar Wim mee bezig is door hem te volgen op Twitter.

2 Responses »

  1. Wat ook handig is is een css framework, welke reeds enkele basis handelingen heeft;
    http://code.google.com/p/blueprintcss/ is een leuke.

  2. Die reset kan veel korter! Ipv alle elementen op te noemen zet je gewoon een astererix (*).

    Dus als volgt:

    [code]*
    {
    padding:0;
    margin:0;
    border:0;
    }[/code]

Leave a Comment