5 ms·
Firebug firebug firebug: http://www.getfirebug.com/ http://www.getfirebug.com/ This brilliant Firefox extension is how I learned CSS. Click the "inspect" butt
by altay 19y ago
Firebug firebug firebug: http://www.getfirebug.com/ http://www.getfirebug.com/
This brilliant Firefox extension is how I learned CSS. Click the "inspect" button, then click any page element, and it'll show you all the CSS rules being applied to that element. It'll also highlight the margin+padding so you can wrap your head around the box model.
Best of all, you can change CSS properties on the fly. Naturally, the best way to learn is to hack up someone else's CSS, so go to a site you like the looks of, and play with the styling.
Soon, you'll be thinking to yourself "man, this isn't complicated at all!"
And then you will open your page in IE 6.
And then you will punch a hole in the wall.
- breck 19y agoI use the Web Developer Toolbar.https://addons.mozilla.org/en-US/firefox/addon/60 https://addons.mozilla.org/en-US/firefox/addon/60 Any reasons why Firebug is better? WD seems to do the same things and more.
- altay 19y agoThat's what everyone says until they try Firebug. I'm not kidding -- I know at least three people who asked me the same question, then came back a week later and said "you're right, this is way better." The interface is far more usable. Also, all WD can do with javascript is turn it on and off; Firebug has a full-fledged javascript debugger. (It's how I learned JS, in addition to CSS!) The DOM inspection tools are amazing. Pretty much the only things I still use WD for are resizing the browser window and checking if I'm in quirks mode. But if breaking the page by adding a label to every div is a key feature for you, then maybe you should stick with WD. =)
- breck 19y agoThanks. I'm installing Firebug now.
- danw 19y agoThen you can repeat the same process in IE with the quite good IE Developers Toolbar: http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en http://www.microsoft.com/downloads/details.aspx?familyid=e59...