Als je veel CSS schrijft zal je zoals ik waarschijnlijk telkens weer dezelfde stukjes code opnieuw gaan (her)gebruiken. Als je pas begint met CSS schrijven heb je deze op voorhand natuurlijk niet klaarliggen om te copy/paste. Daarom wil ik diegenen helpen met een stukje standaard CSS die je telkens opnieuw kunt (her)gebruiken.

Standaard CSS

Het is niet nodig, maar misschien wel handig bovenaan je naam en URL te vermelden als commentaar ( /* commentaar */ ):

/*
Website : URL van de website waarvoor de CSS dient
CSS : Je naam
E-mail: je email
WWW: je website
---------------------------------------
CSS bestand vrijgegeven onder C.C. licentie:
http://creativecommons.org/licenses/by-sa/2.0/be/
*/

Nu begint de echte CSS:

* {
margin: 0;
padding: 0;
}

Alle verschillen tussen browser rendering zijn hiermee van de baan.

body {
background-color : #FFF;
color : #333;
font : normal normal 62.5%/1.5 Arial, Verdana, "Times New Roman", sans-serif;
}

Achtergrondkleur op wit en tekst in het bijna zwart voor de leesbaarheid te verzekeren indien bepaalde afbeeldingen niet geladen kunnen worden of indien afbeelding weergeven uit staan op de user’s browser. De lettergrootte naar 10 px halen uitgaande van het feit dat de standaard instellingen van de browsers zijn blijven staan op 16px.
1.5 keer lettergrootte als tekst afstand boven en onder samen, en standaard lettertype bepalen die voor 99% zeker aanwezig is op de computer van de bezoeker.

Links

Links stylen is een questie van smaak, maar bepaalde dingen kun je vooraf reeds bepalen:

a img {
border : none;
}

a {
outline: none;
}

Met dit ben je zeker dat FireFox geen stippelboord toont rond afbeeldingen en tekst als deze een link zijn.

Titels

De titel tags stylen kan later in je CSS op smaak worden gebracht, maar hoe groot je titels moeten zijn kan je nu reeds bepalen alsook de afstand tussen titel en het daarop volgende element. Hiervoor is het aangeraden telkens margin-bottom te gebruiken omdat als je een combinatie top en bottom gaat maken er margin-collapsing aan de knikker is:

h1 {
font-size: 2.2em; /* 22px */
margin-bottom: 15px;
}

h2 {
font-size: 2.0em; /* 20px */
margin-bottom: 15px;
}

h3 {
font-size: 1.8em; /* 18px */
margin-bottom: 15px;
}

h4 {
font-size: 1.6em; /* 16px */
margin-bottom: 15px;
}

h5 {
font-size: 1.4em; /* 14px */
margin-bottom: 15px;
}

p {
font-size: 1.2em; /* 12px */
margin-bottom: 15px;
}

Style naar smaak

Meestal zijn de bolletjes bij een <ul> lijst niet gewenst, dus kan je beter het voorafaan reeds bepalen in plaats van telkens opnieuw voor elke blok waarin een lijst voorkomt je CSS zodanig met overbodige style bevuilen.

ul {
list-style-type : none;
}

Nog handig

Het is misschien nog handig te vertellen dat je voor de eerst gebruikte <div> die dient als container (omvatter) <div id="container"> je een font-size bepaald, namelijk 100%. Dan ben je zeker dat elke voorafgaande bepaling ook zeker tot zijn recht komt.

Download

Als je wenst mag je deze standaard CSS downloaden:

Download de standaard css style default_style.zip.