Edit CSS In Realtime
Web Developer Tools: Thursday, November 9th, 2006
Editing CSS ends up being a lot of trial and error as well as time consuming. Being able to make changes on the fly, or even just seeing what the changes do, is really handy. If you use Firefox with the Web Developer add-on, you’ll be all set.
PICTURED ABOVE: the style for the header background is changed to red, on the fly.
Once Web Developer is installed, you can activate it’s toolbar from the Firefox menu: View/Toolbars. Then from its toolbar you can select CSS/Edit CSS and you will get a frame with the CSS file referenced from the page you are on. After changes you will need to save it to your hard disk and then upload it to your site. There are a number of other tools in the Web Developer toolbar too for testing and getting info on web pages.
November 9th, 2006 at 2:13 pm
WOW!!! That is too cool! Great idea.
Also the site looks great! This will be a great way for everyone to keep up on improvements and tips!
November 12th, 2006 at 12:41 am
[...] This add-on installs as a toolbar item, so you will need to drag it to a toolbar, I recommend dragging it to the end of the Web Developer toolbar. Just click View/Toolbars/Customize, then scroll down and you should see a little icon called CSSViewer, just drag that to the end of your Web Developer toolbar and click on it to activate it, and again to shut it off. [...]
December 13th, 2007 at 1:59 pm
[...] with CSS for the first time, seeing these sites gives them some ideas. Also using Firefox with the Web Developer Toolbar and CSS Viewer you can view the style sheet and hover the CSS elements of the sites to see how the [...]
May 9th, 2008 at 10:40 pm
2f4854e4beac…
2f4854e4beacaaac22f5…