5 CSS tips

Cascading stylesheets is voor de een gesneden koek, terwijl het voor de ander nog een groot mysterie blijkt te zijn. Met onderstaande 5 CSS tips heb je in ieder geval een aantal basisprincipes op een rij die je kunt gebruiken om je stijlblad goed te krijgen.

1. Verwijder de standaard padding en margin formaten

Verschillende browsers hebben verschillende formaten voor margin en padding. Hieronder kun je zien wat margin en padding ook alweer is.


Je kunt op een eenvoudige manier deze waarden op nul zetten:

* {
margin: 0;
padding: 0;
}

Wanneer je deze waarden op nul zet voor het hele document, kun je vanaf nu zelf bepalen hoe groot een marge van een bepaald boxelement moet zijn.

2. Problemen in de code oplossen

Soms loop je tegen een probleem aan in je code en heb je geen idee hoe je dat probleem moet oplossen. Je weet iet precies waar de bottle-neck zit en door de grote hoeveelheid code weet je ook niet waar je moet zoeken. Een handig trucje is om de volgende css code toe te voegen aan het probleemgebied: border: 1px solid red; Je ziet dan vaak sneller waar er iets fout gaat. Waarom een bepaald onderdeel op een verkeerde plek staat of waarom een bepaalde div ineens onder een andere div staat, bijvoorbeeld omdat voorgaande divs te breed zijn.

3. Een complete webpagina centreren

Centreren van een webpagina is ook niet erg ingewikkeld, maar je moet het maar weten. Ten eerste moet je een zogenaamde container hebben, een div die alle code van de webpagina (dus binnen de body-tag) omvat. Deze div wordt vaak een id=”container” genoemd. De div met id container geven we de volgende css code mee:

#container {
width: 800px;
margin: 0 auto;
}

Hierbij mag de breedte (width) naar wens worden aangepast. De nul achter margin staat voor de bovenzijde en de onderzijde. auto is voor de linker en rechterkant, deze wordt automatisch bepaald. Doordat de vaste breedte is bepaald wordt de site gecentreerd.

4. Werk in CSS van boven naar beneden

Zorg dat je declaraties eerst geplaatst worden zodat je ze verderop in de code niet steeds opnieuw hoeft te bepalen. Wanneer je telkens padding: 0; moet zetten dan kun je dat beter bovenaan in je css code een keer moeten doen, dan tien keer verderop in de code. Gebruik desnoods de css code om te erven: ‘inherit’.

5. Maak een inhoudsopgave en nummer het CSS bestand

Geef elk onderdeel een nummer in je css code met behulp van een commentaar regel. Deze schrijf je in CSS met /* en eindig met */. Wanneer je stijlblad klaar is zet je met dezelfde commentaarregels bovenaan een inhoudsopgave. Op een later moment kun je eenvoudig terugvinden waar je bepaalde code hebt geplaatst en kun je daarheen scrollen. Zie bijvoorbeeld het stijlblad hieronder.