CSS Tutorial by Paul Bohman

• Introduction to CSS |
• Viewing the CSS of Existing Sites

Web Developer Toolbar

Designing with CSS is fun, but it can also be challenging. It helps to have tools that make the design—and debugging—process easier. The Web Developer Toolbar, by Chris Pederick, is a good tool to have on hand. The toolbar is an add-on for the Firefox web browser (it won't work in Internet Explorer). Some of you may already have it installed. If so, skip to the next section.

To install the Web Developer Toolbar:

1. First install the Firefox browser, if you haven't already, available at www.mozilla.com.
2. Start the Firefox browser and go to https://addons.mozilla.org/firefox/60/
3. Click on "Install now."
4. You should see a window pop up.
   Click on "install now" in that window.
5. Close the popup window.
6. Restart Firefox

Note: You can install other extensions for the Firefox browser through this same web site, or by going to the Firefox menu and selecting Tools > Extensions, then clicking on "Get more extensions."

Turning Off Styles

After restarting Firefox, the toolbar should appear. This is a powerful tool. I won't get into all the details in this topic, but one of the features that is useful to this topic is the ability to quickly turn off styles. You can do this with the keyboard shortcut Shift+Ctrl+S, or by going to CSS > Disable Styles > All Styles. Turning off styles allows you to compare the document structure in the underlying XHTML to the visual appearance created by the styles.

Editing Styles in Real Time

This feature can save you time by allowing you to experiment with styles in real time. The changes you make show up immediately in exactly the way the browser renders them.

This is important because most style authoring tools, including Dreamweaver, have rather weak support for styles. Some of the styles look right in Dreamweaver, but many of them look very wrong. You have to check your styles in the browser to see how they really appear.

To edit styles in real time, go to CSS > Edit CSS. This opens up an editing bar on the bottom of the browser. You can type directly into this area and see the effects.

Viewing the IDs and Classes of Elements in the Web Page

Sometimes it helps to see where the classes and IDs are in a page (these are important for assigning styles). You can do this quickly by choosing Information > Display ID and Class Details from the toolbar menu.

Other

The toolbar can do many other things as well. Take some time to experiment with the toolbars functions.