Style panel

  • Revision slug: Tools/Page_Inspector/Style_panel
  • Revision title: Style panel
  • Revision id: 26877
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 27 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 are listed first. Styles are grouped by source, showing you the name of the file from which the style was loaded; the "inline" group lists styles applied using the HTML style attribute.

Inherited styles are noted as such as well, and styles that are overridden by more recently-applied ones are crossed out; this makes it easier to figure out where styles on your elements have come from, and may help you debug problems where elements aren't getting styled the way you expect.

You can make changes to the CSS in the Rules view, 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. Similarly, you can change the value of any property by clicking the value and entering a new one.

Adding a new property is as simple as clicking anywhere on the line with the closing brace character ("}"); this adds a new line and lets you enter the name of the new property and its value.

Any changes you make are temporary; reloading the page will restore the original styling.

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.

{{ h2_fx_minversion("New features in Firefox 13", 13) }}

If you want to do more substantial editing of the CSS for a rule, you can click on its heading line with the grey background (such as "mdn-min.css:1" in the screenshot). That will open the style editor with the cursor placed in that rule's definition.

If you right-click on a rule, you get a popup menu that provides options for copying the rule in various ways, so you can paste it into another document, for example.

If you enter an invalid value for a property when editing it, a yellow alert icon appears next to the property, as shown below:

style-panel-warning-icon.png

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

{{ languages( { "ja": "ja/Tools/Page_Inspector/Style_panel"} ) }}

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 <a href="/en/DOM/stylesheet" title="stylesheet">stylesheets</a> 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 are listed first. Styles are grouped by source, showing you the name of the file from which the style was loaded; the "inline" group lists styles applied using the HTML <code>style</code> attribute.</p>
<p>Inherited styles are noted as such as well, and styles that are overridden by more recently-applied ones are crossed out; this makes it easier to figure out where styles on your elements have come from, and may help you debug problems where elements aren't getting styled the way you expect.</p>
<p>You can make changes to the CSS in the Rules view, 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.</p>
<p>In addition, you can rename a property by clicking on it and typing a new name. Similarly, you can change the value of any property by clicking the value and entering a new one.</p>
<p>Adding a new property is as simple as clicking anywhere on the line with the closing brace character ("<span class="nowiki">}</span>"); this adds a new line and lets you enter the name of the new property and its value.</p>
<p>Any changes you make are temporary; reloading the page will restore the original styling.</p>
<p>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>
<p>{{ h2_fx_minversion("New features in Firefox 13", 13) }}</p>
<p>If you want to do more substantial editing of the CSS for a rule, you can click on its heading line with the grey background (such as "mdn-min.css:1" in the screenshot). That will open the <a href="/en/Tools/Style_Editor" title="Style Editor">style editor</a> with the cursor placed in that rule's definition.</p>
<p>If you right-click on a rule, you get a popup menu that provides options for copying the rule in various ways, so you can paste it into another document, for example.</p>
<p>If you enter an invalid value for a property when editing it, a yellow alert icon appears next to the property, as shown below:</p>
<p><img alt="style-panel-warning-icon.png" border="1" class="internal default" src="/@api/deki/files/6223/=style-panel-warning-icon.png" style=""></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><img align="left" alt="showing-info-icon.png" class="internal lwrap" src="/@api/deki/files/6079/=showing-info-icon.png" style="">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>
<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/Style_panel"} ) }}</p>
Revert to this revision