Style panel

  • Revision slug: Tools/Page_Inspector/Style_panel
  • Revision title: Style panel
  • Revision id: 26863
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment one or more formatting changes

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 CSS {{ cssxref("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.

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 CSS {{ cssxref("style") }} 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 ("}"), 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.</p>
Revert to this revision