Real-time interactive css changes in Firefox

Most web design professionals find that css is good for separating the content of web pages and the presentation. However, if you build websites using a text editor or software that does not render css very well you may need to preview your pages using a browser.

Firefox is a great browser and has many extras in the form of extensions. For web designers, there is an extension that adds the ability to view and edit the css interactively, so you can make changes to the css and immediately see the result in the browser window.

Here's how . . .

First get Firefox and install the developer's toolbar

How to make css changes interactively

Browse to the web page you want to work on

 

change your css interactively

Click the CSS dropdown in the developer toolbar

 

edit css using developer toolbar in firefox

 

Now look to the bottom of the browser window

 

how to change css interactively

Edit the css and watch the effect in the browser window

See right-hand column for a demonstration

 

 

CSS interactive change demo

Let's change the text colour of all headings that have the h1 tag on this page from blue to purple

Open the css for edit using the toobar

Find the h1 selector and corresponding css

 

find the h1 selector

 

make the change to the css and watch the heading style change immediately, as shown below

 

 

immediate change to css seen in browser

 

Don't forget that these changes are taking place in the browser, so they do not affect the css stored on your server. You must save the changes (click the floppy disk icon) onto your local computer then upload the new css file to your server.