HTML and CSS Reference
In-Depth Information
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
check box.
Tip
Summary
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
