ptg16476052Editing Styles with Developer Tools 1718
Editing Styles with Developer Tools
When you start working with full-fledged style sheets, it becomes easier to manipulate
those style sheets using the Chrome Developer Tools (or the tools for other browsers).
Figure 8.3 shows the Chrome Developer T ools for the page in Figure 8.1.
As you can see, the styles that apply to the current element are displayed on the right. In
this case, the style sheet on the page supplies one style that sets the font-size to 80% for
tags, and the user agent style sheet provides others. The user agent style sheet rep-
resents the browser defaults. There are also inherited styles listed, with the rules marked
out. That’s because the style for the
tag overrides them.
You can click on the styles in the panel to the right to modify the values, disable and re-
enable the styles, and even add new style rules. This enables you to experiment with the
styles on the page easily.
As your style sheets become more complex, a large number of styles can be applied to a
specific element. The Computed Styles provide a view of the actual styles applied to the
element from all sources.
FIGURE 8.3
Viewing and modi-
fying CSS in the
Chrome Developer
Tools.