CSS tips voor beginners

Vroeger was het aanpassen van het uiterlijk van een website soms erg lastig en omslachtig. Gelukkig maken we sinds de invoering van de html 4 standaard gebruik van CSS (Cascading Style Sheets). Een beetje basiskennis van CSS en wat gezond verstand is voor een beginner al genoeg om zijn of haar huidige website of blog te kunnen stijlen. In dit artikel zal ik een overzicht maken van wat ik de belangrijkste tips voor beginners vind.

1. Maak gebruik van een reset.css

   Er bestaan helaas nog veel verschillen tussen verschillende populaire browsers. 1 van die verschillen is de manier waarop de browser ongestylde elementen laat zien. Soms net even wat meer marges om een element bijvoorbeeld. Een reset css zet alle basiswaardes voor elementen in alle browsers gelijk. Deze code zet je aan het begin van je CSS file.

   Enkele aanraders van dit stukje code zijn: Yahoo reset CSS en Eric Meyer’s CSS Reset.

2. Schrijf je CSS in de verkorte notering.

   Het bespaart je een hoop tikwerk als je de verkorte CSS noteringen gebruikt om je CSS styles aan te duiden. Je stylesheet wordt er overzichtelijker en kleiner van.

   Michael van leigeber.com schreef er vorig jaar een duidelijk artikel over en maakte een mooi cheat-sheet in pdf formaat.

3. Leer het verschil tussen class en id

   Behalve dat een class naam vooraf wordt gegaan door een . en een id naam door een # zijn ze in het gebruik ook erg verschillend. Gebruik een id wanneer je een specifiek deel van je document aanduidt, bijvoorbeeld: id="header". Gebruik een class als je een meer gegeneraliseerd stijl element gebruikt, bijvoorbeeld class="widget_title".

   Id en class kunnen ook op dezelfde tag toegepast worden. Stel je hebt een header en footer in je document die je dezelfde kleur en lettertype wilt meegeven. De gemeenschappelijke styling elementen kan je dan onderbrengen in een class en die op beide document delen toepassen. De id="header" zal dan de header specifieke styling elementen bevatten. Op deze pagina staat het gebruik van de combinatie class en id nog eens duidelijk beschreven.

4. Firebug, firefox extensie

   Gebruik firebug de extensie voor de mozilla firefox browser om een beter inzicht te krijgen in de structuur van je website. Via firebug is het heel eenvoudig om te zien waar het mis gaat in je code, zodat je css foutjes makkelijk kunt oplossen.

   

   Download de firebug extensie hier.

5. Maak gebruik van “!important”

   Soms wil je een bepaalde stijl forceren en wil je er absoluut zeker van zijn dat die stijl niet overschreven wordt door een andere stijl declaratie. De toevoeging van "!important" aan het einde van je stijl declaratie zorgt hiervoor. Bijvoorbeeld: .inhoud { background-color:blue !important; background-color:red;} zal dus altijd een blauwe achtergrond geven ook al wordt er daarna (latere declaraties in je css document overschrijven de eerdere) een rode achtergrondkleur aan het element gegeven. Deze "truuk" werkt niet altijd in oudere versies van internet explorer, maar goed dat is dan ook regelrechte troep natuurlijk.

6. Positionering en CSS

   Positionering van elementen kan je een hoop hoofdpijn bezorgen in het begin. Lees daarom deze tutorial eens om een beter inzicht te krijgen in de verschillende positioneringsmogelijkheden.

7. Hou je code netjes

   Als je een enorme troep op je bureau maakt, kan je dingen ook moeilijker terugvinden, dus hou je code netjes en geordend, zodat je sneller aanpassingen kunt maken zonder je eerst rot te zoeken naar het juiste regeltje. Smashing magazine heeft een mooi stukje geschreven over dit onderwerp. Een aanvulling die ik hier zelf nog op wil geven is om je stijl elementen alfabetisch te ordenen. background property bovenaan en de width property onderaan dus.

Met deze tips heb je al een goede basis om met CSS aan de slag te gaan. Als afsluiting heb ik nog een erg handige lijst gevonden met alle CSS style elementen, deze lijst wordt continue ge-update.