HTML and CSS Reference
the element you want to inspect, and select Inspect Element from the context menu. This opens the developer
tools with the underlying HTML element highlighted and all the style rules that have been applied to it (see
Figure 1-5 ). Similar tools can be accessed in IE 8 and later by pressing F12, and in Opera by selecting
Tools ➤ Advanced ➤ Opera Dragony .
Figure 1-5. The Developer Tools panel in Chrome
In the initial stages, you'll find the amount of information overwhelming, but you can toggle individual rules
on and off or edit them to see what effect your changes have. Style definitions that have been overridden are
displayed with a strikethrough line. Studying your own pages, as well as sites that you admire, greatly increases
your understanding of CSS.
■ To gain access to the developer tools in Safari, you need to open the Preferences panel from the Edit menu
in Windows or the Safari menu in Mac oS X. In the Advanced tab, select the Show Develop menu in menu bar
This chapter has given you a brief overview of the development of CSS and the advantages of separating styling
information from the HTML markup that controls the structure of your web pages. Locating style rules in one
or more external files allows you to apply changes instantly throughout a website rather than needing to update