Live CSS Editing : CSS Terminal

On-the-fly CSS editing can come in handy when you’re developing a website; when you’re debugging, it can be invaluable; and it can be a huge help when creating prototypes, too. But your options are somewhat limited. Many designers turn to Firebug or the Web Developer Toolbar to edit their CSS on the fly, but those interfaces are not the easiest to use if you have to do a lot of editing (also, accidentally deleting what you’ve done is a little too easy if you’re making a lot of changes).

Enter CSS Terminal. With this simple little bookmarklet, you can add or change styles on a live website right in your browser. Installing it is easy: just drag it to your bookmarks toolbar. The window is resizable, so you can make it as large or small as you need to when editing. You might also want to look at CSS-101’s prototyping snippet, which overlays a grid or mock-up over the page that you’re styling so that you can edit the content directly in the browser.