Je CSS stylesheets eenvoudig tweaken met Firebug

Tijdens de ontwikkeling van een website kan het maken van een stylesheet een tijdrovende bezigheid zijn: eerst een stylesheet opzetten, wijzigingen opslaan en die vervolgens bekijken in je browser. Bij elke wijziging het opnieuw uitvoeren. Ik ga er overigens even vanuit dat je geen pakket gebruikt met een WYSIWYG editor (zoals Dreamweaver). Met de Firebug plugin voor Firefox kan je jezelf veel tijd besparen. Het werkt eenvoudig: inspecteer onderdelen van je pagina, pas ze aan in je browser en – als het je bevalt – pas je code aan.

Inspecteer onderdelen van je pagina
Als je Firebug geïnstalleerd hebt, klik dan met je rechtermuisknop op een onderdeel dat je zou willen wijzigen. Ik neem even als voorbeeld de website van nu.nl. Stel je wilt in het onderstaande gedeelte de link naast de foto wijzigen. Klik met je rechtermuisknop op de link en kies 'inspect element' uit het menu.

Firebug laat nu de HTML code van dit deel zien en het bijbehorende CSS stylesheet. Het handige is dat de regelnummers van het CSS bestand erbij staan. Ook zie je direct welke regels van invloed zijn en welke niet. Als iets is doorgestreept, dan geldt de regel niet. In dit voorbeeld heeft de .link class geen invloed op de pagina.

De CSS code aanpassen
Je kunt nu twee dingen doen in de inspector: code uitzetten of juist toevoegen.
1) Code uitzetten – Als je met je muis voor een eigenschap klikt, dan kan je die eigenschap uitzetten.

2) Code toevoegen – Als je met je rechtermuisknop erop klikt kan je een nieuw element juist toevoegen. Zodra je begint met typen geeft Firebug aanvullingen van mogelijkheden. In dit voorbeeld probeer ik een nieuwe fontgrootte uit.

Het prettige is dat je de wijzigingen direct in het scherm ziet!

Je oorspronkelijke CSS bestand aanpassen
Bevalt het je wat je ziet? Pas dan je oorspronkelijke stylesheet aan.

Stem / Bookmark [?]