Here are three tools that you will like to play with even if you are not designing a website.
My favorite is Chris Pederick’s Web Developer Tool for Firefox. The screenshot above (click to see a large version!) shows the “edit CSS” feature. Mess around with the CSS and see the results immediately in the upper screen. You can do the same with the html. It’s a great way to learn which CSS class or selector does what; just enter some outrageous number or color and see what blows up in the upper screen! You can also use it to quickly try out a new look.
Microsoft makes a Web Developer tool for IE8. (I assume this tool also existed for earlier IE incarnations, but I never checked.) I don’t find it as easy to use as the Firefox tool, but, to be fair, I tried it for the first time today. I am using it to try to figure out why my blog layout is screwy in IE.
Finally, if you have pixel-brain, and the code you are uncovering with the above tools is in ems, and you wonder how they relate to one another, use the PXtoEM web-based Pixel-to-EM converter and code-generator tool. The site can generate CSS code for you, and it also has easy-to-understand explanations of ems and their useage and why you should use ems in your CSS instead of pixels.
Have more questions about this subject? Need help establishing a social network presence for your product or service? I can help you! Contact me at info@afmarcom.com or 602.735.3107.
