In addition to being excellent tools for working on your own CSS, the tools described on this page also help you to observe how other people have styled their web sites. Both View Style Information and Edit CSS can help you to quickly view the CSS applied to any web page. The Edit CSS tool goes a step further and provides a unique and powerful CSS editing environment! I round out the page with a short commentary on both the convenience and pitfalls of the Edit HTML tool.
View Style Information
From the CSS menu on the Web Developer toolbar, select View Style Information.
Nothing happens until you click an element on the web page. This
action opens either a separate browser tab, or the sidebar if you have
chosen that setup option
.
on the Web Developer web site.In the example below, I clicked the "html file" link on the Zen Garden web page and the associated CSS rules appear in the sidebar. Note that the line number within the CSS style sheet is also presented in parentheses making the individual rule easy to find when viewing the entire style sheet.
The View Style Information tool remains active until you toggle it off by selecting it again from the CSS menu.
Keystrokes for toggling the View Style Information tool on/off are Ctrl+Shift+Y.
Edit CSS
After the Validation tools, Edit CSS is arguably the most useful tool on the Web Developer toolbar! With a web page open in the browser, select CSS | Edit CSS. The sidebar opens displaying the CSS code side by side with the browser view of the page. As you edit the CSS in the sidebar, the affected elements change in the browser view in real time!
If the web page contains multiple style sheets, either linked or embedded, tabs for each one will appear at the top of the sidebar.
Above the style sheet tabs is a small toolbar. Below is a description of each button and its function.
- Load
- Allows you to associate a new style sheet with a document. This is useful for displaying or comparing alternative style sheets.
- Save
-
If you make edits in the CSS sidebar that you intend to keep, be sure to Save before closing the sidebar or all changes will be lost!Allows you to save changes made to the CSS file while working in the CSS Edit sidebar. You have the option to save changes as a new CSS file or overwrite the original CSS file with the new changes.
- Clear
- Removes all content from the displayed style sheet. This might be useful if you are experimenting with styles and want to start over with a clean slate. Use this function with caution! If you accidentally Clear unsaved edits, use the universal keystroke for Undo - [Ctrl+Z|Windows - Command+Z|Mac] - to return the Edit CSS sidebar to the previous state.
- Reset All
- Returns the CSS file to its original unedited state since the last Save.
- Apply
- If, in the Options | Sidebar dialog box, the Sidebar Automatic Update frequency has been set to a very slow rate, you can use the Apply button to update the browser view with your CSS edits. At the default Update setting, it is not necessary to use the Apply button.
- Stick/Unstick
- Stick [arrow pointing down]: If you have multiple web pages open in browser tabs, each attached to a different style sheet, Stick (the default) shows each document's style sheet in the sidebar as you click the browser tabs.
- Unstick [arrow pointing up]: If you have multiple web pages open in browser tabs, toggling to the Unstick function applies the current style sheet to the web pages in all tabs.
Edit HTML
The Web Developer toolbar's Miscellaneous | Edit HTML function opens a sidebar displaying the document's HTML. Edit HTML is NOT RECOMMENDED FOR EDITING due to a software bug that causes validation problems. However, this tool can be quite handy for side-by-side examination of a document's HTML and its browser view.