mozilla

Revision 26867 of Style panel

  • Revision slug: Tools/Page_Inspector/Style_panel
  • Revision title: Style panel
  • Revision id: 26867
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment add "learning more about properties" section; 74 words added

Revision Content

The Page Inspector's Style panel lets you explore and manipulate the CSS for the page you're inspecting. It offers two views of the CSS associated with the currently selected element: a CSS rules-based view and a properties-based view.

The Rules view

style-rules.pngThe rules view, shown to the left, is organized similarly to the way stylesheets are organized. It shows all the rules that apply to the selected element, as well as the properties (and their values) those rules give the element. The most recently applied styles (that is, those applied using the HTML style attribute) are listed first. Styles are grouped by source, showing you the name of the file from which the style was loaded.

Inherited styles are noted as such as well, and styles that are overridden by more recently-applied ones are crossed out.

You can make changes here, as well. To toggle a style on and off, simply click the checkbox next to it. The change is reflected immediately in your browser window. In addition, you can rename a property by clicking on it and typing a new name; likewise, you can change the value of a property by clicking the value and entering a new one.

If you want to add a new property, simply click anywhere on the line with the closing brace character ("}"), and you can do so. For example, let's add a new property to the {{ HTMLElement("a") }} element for the "Sign in" button whose rule is represented here:

font-size.png

Now the button is larger than it had been before, due to the increased font size. As you can see, you can use the Style panel to experiment with your content and see what things will look like in real time, all in a working context.

The Properties view

The Properties view, on the other hand, shows you all of the properties which have been set on the selected element, and lets you see their values, as well as which style sheet and rule set that value. They're listed in alphabetical order, and a search feature is provided to make it easy to find what you want.

style-properties.pngBy default, only styles set in the page's own stylesheets are listed, but you can toggle off the "Only user styles" checkbox if you want to also see the browser's defaults.

Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties! Want to find the rule responsible for setting the font to "Lucida Grande"? Simply type that in the search box.

You can click on the disclosure triangle next to a given property to see details as to what its value is, how it was set, and which stylesheet it came from.

Learning more about properties

showing-info-icon.pngA particularly nifty feature that's handy when you encounter a CSS property you're not familiar with, or one you need to look up additional inforomation about: while your mouse cursor is hovering over a property in the Properties view, a small "info" icon appears. Clicking this icon opens the documentation for that property on the Mozilla Developer Network wiki.

See also

Revision Source

<p>The Page Inspector's Style panel lets you explore and manipulate the CSS for the page you're inspecting. It offers two views of the CSS associated with the currently selected element: a CSS rules-based view and a properties-based view.</p>
<h2>The Rules view</h2>
<p><img align="left" alt="style-rules.png" class="internal lwrap" src="/@api/deki/files/6075/=style-rules.png" style="">The rules view, shown to the left, is organized similarly to the way stylesheets are organized. It shows all the rules that apply to the selected element, as well as the properties (and their values) those rules give the element. The most recently applied styles (that is, those applied using the HTML <code>style</code> attribute) are listed first. Styles are grouped by source, showing you the name of the file from which the style was loaded.</p>
<p>Inherited styles are noted as such as well, and styles that are overridden by more recently-applied ones are crossed out.</p>
<p>You can make changes here, as well. To toggle a style on and off, simply click the checkbox next to it. The change is reflected immediately in your browser window. In addition, you can rename a property by clicking on it and typing a new name; likewise, you can change the value of a property by clicking the value and entering a new one.</p>
<p>If you want to add a new property, simply click anywhere on the line with the closing brace character ("<span class="nowiki">}</span>"), and you can do so. For example, let's add a new property to the {{ HTMLElement("a") }} element for the "Sign in" button whose rule is represented here:</p>
<p><img alt="font-size.png" class="internal default" src="/@api/deki/files/6076/=font-size.png" style="border:1px solid black;"></p>
<p>Now the button is larger than it had been before, due to the increased font size. As you can see, you can use the Style panel to experiment with your content and see what things will look like in real time, all in a working context.</p>
<h2>The Properties view</h2>
<p>The Properties view, on the other hand, shows you all of the properties which have been set on the selected element, and lets you see their values, as well as which style sheet and rule set that value. They're listed in alphabetical order, and a search feature is provided to make it easy to find what you want.</p>
<p><img align="right" alt="style-properties.png" class="internal rwrap" src="/@api/deki/files/6077/=style-properties.png" style="">By default, only styles set in the page's own stylesheets are listed, but you can toggle off the "Only user styles" checkbox if you want to also see the browser's defaults.</p>
<p>Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties! Want to find the rule responsible for setting the font to "Lucida Grande"? Simply type that in the search box.</p>
<p>You can click on the disclosure triangle next to a given property to see details as to what its value is, how it was set, and which stylesheet it came from.</p>
<h3>Learning more about properties</h3>
<p><a href="/@api/deki/files/6079/=showing-info-icon.png" title="showing-info-icon.png"><img align="left" alt="showing-info-icon.png" class="internal lwrap" src="/@api/deki/files/6079/=showing-info-icon.png?size=webview" style="width: 313px; height: 61px; border: 1px solid black;"></a>A particularly nifty feature that's handy when you encounter a CSS property you're not familiar with, or one you need to look up additional inforomation about: while your mouse cursor is hovering over a property in the Properties view, a small "info" icon appears. Clicking this icon opens the documentation for that property on the Mozilla Developer Network wiki.</p><h2>See also</h2>
<ul> <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li> <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> <li><a href="/en/Tools" title="Tools">Tools</a></li>
</ul>
Revert to this revision