CSS: The Missing Manual

Eliminating Browser Style Interference

When you view a non "CSS-ified" Web page in a Web browser, HTML tags already have some minimal formatting: headings are bold, the <h1> tag is bigger than other text, links are underlined and blue, and so on. In some cases, different Web browsers apply slightly different formatting to each of these elements. You may experience some frustrating "it almost looks the same in Internet Explorer and Firefox and Safari" moments.

POWER USERS' CLINIC: The Web Developer's Toolbar

Web designers have to stay on top of a lot of things: HTML, CSS, links, graphics, forms, and so on. Troubleshooting problems with any of these items can sometimes be a real challenge. The Web Developer's Toolbar (http://chrispederick.com/work/webdeveloper/ ), created by Chris Pederick, is a Firefox extension that's like the Swiss-army knife of Web design (see Figure 14-4). If you don't have Firefox, you should install it for this toolbar alone (http://www.mozilla.com/firefox).

Download the extension, install it, and spend a little time with the different options. You have many features available to you, but here are a few worth noting:

• Choose CSS → View CSS, and you'll see all of the styles for the current page, even styles imported from multiple style sheets. If you've ever been to a Web site and wondered "How'd they do that?" this tool gives you a free backstage tour.

• Choose CSS → Edit CSS, and you can edit the styles of the current Web page. This doesn't do any permanent damage ...