devtools-docs/docs/elements-styles.html

{{+bindTo:partials.standard_devtools_article}}
<h1>Editing styles</h1>



<p>This tutorial covers editing CSS styles using various DevTools aids.</p>

<p class="note"><b>Note:</b> If you are a Web Developer and want to get the
latest version of Developer Tools, you should use the Google Chrome release
from the <a href="http://dev.chromium.org/getting-involved/dev-channel">Developer Channel</a>.
</p>

<div class="collapsible">
<h2 id="computed_style">Computed Style Pane</h2>

  <li>Invoke context menu on
  <span id="computed_styles_test">THIS (Inspect Me)</span> element
  or hit <b>Control-Shift-C</b> to enter the Inspect Element mode and
  click on it. Alternatively, if you have DevTools open, click the
  <b>Inspect Element</b>
  <img class="ui" alt="magnifier" src="../images/inspect-icon.png" style="top:6px">
  button at the bottom of the <b>Elements</b> panel to point-click the element
  in the page.</li>

  <li>You will see several panes on the right-hand side of the panel.
  If the <b>Computed Style</b> pane is collapsed, expand it by clicking its
  header. The pane displays all the final values for CSS properties computed
  by the browser for the currently selected DOM node.
  </li>

  <li>For every property specified by more than one rule, the pane displays a
  computed trace, which is a stack of selectors applicable to the node
  and specifying the property value. Since rule selectors have different
  specificities, all but the top-most one will be “cancelled out” in the
  trace, which is denoted by a strike-through type.
  </li>

  <li>Whenever possible, a computed trace element will contain a link to the
  source code fragment that defines the respective rule.
    <div class="screenshot"><img src="elements-styles-files/computedStyles.png"></div>
  </li>

  <li>The pane contains only properties from rules that
  are directly applicable to the selected element. In order to additionally
  display inherited properties, enable the <b>Show inherited</b> checkbox. Such
  properties will be displayed in a dimmed font.</li>


</div>
<div class="collapsible">
<h2 id="styles">Styles Pane</h2>
  <li>For the currently selected DOM node, this pane displays all the styles
  applicable to this node. Styles with gray background are read-only, the rest
  are editable.</li>
  <li style="margin-top: .5em">Invoke the DevTools inspector on
  <span id="test_styles">THIS</span> element as mentioned above.</li>

<h3 id="styles_view">Viewing Styles</h3>
  <li>The styles are displayed as closely to the original declaration as
  possible. Some properties can have exclamation marks
  (<span><img src="elements-styles-files/warningIcon.png"></span>) next to their
  names. This means that the property name and/or value is not understood by the
  browser, so the property is ignored (as per the CSS specification).

  <p class="note"><b>Note:</b> A style declaration may contain several
  properties with the same name. Only the last one takes effect, canceling the
  preceding ones. Those will be struck out, like overridden properties.</p>
  </li>

  <li>If a property value (say, <code>background-image</code>) contains a URL
  that has been loaded, you can click it to navigate to the corresponding
  resource in the Resources panel.</li>

  <li>CSS color values are accompanied by a swatch filled with the respective
  color. You can click the swatch to cycle through all color formats available
  for the corresponding property, or use the <b>Gear</b> menu options to set the
  format for all color values, for which the format has not been set by clicking
  on the color swatch. The <b>As Authored</b> option formats color values in the
  way they are written in the CSS code.</li>

  <li>Pseudo element styles, such as <code>::before</code>,
  <code>::after</code>, and many more <code>-webkit-*</code> ones, are also
  exposed in the Styles pane, along with the rules inherited from ancestor
  elements.
    <div class="screenshot"><img src="elements-styles-files/pseudoInherited.png"></div>
  </li>


<h3 id="styles_edit">Editing Styles</h3>
  <li>Double-click the <code>worder</code> property name, and type in
  <code>bo</code> instead. A valid <code>border</code> property name will be
  automatically suggested.
    <div class="screenshot"><img src="elements-styles-files/borderSuggest.png"></div>
  </li>

  <li>Hit <b>Down</b> several times to reach the <code>border-color</code>
  suggestion, and press <b>Enter</b> or <b>Tab</b> to accept it and jump to the
  value field (alternatively, you can press <b>Right</b> to accept the
  suggestion and continue editing the field,) or <b>Esc</b> to cancel
  the change. As usual, <b>Shift-Tab</b> traverses input fields in the reverse
  order.</li>

  <li>While editing the <code>border-color</code> property value, delete
  the <code>clue</code> word, and type in <code>bl</code> – in a moment, you
  will see a suggestion: <code>black</code>.
    <div class="screenshot"><img src="elements-styles-files/blackSuggest.png"></div>
  </li>

  <li>Press <b>Up</b> or <b>Down</b> to cycle through all suggestions starting
  with <code>bl</code>. Choose any color value you like, and press <b>Enter</b>
  or <b>Tab</b> to accept the suggestion and commit the new property value. The
  property gets committed, and the exclamation mark disappears, as the property
  has become valid.
  </li>

  <li>Besides iterating through available value keywords, you can also
  increment/decrement numeric property values (like <code>opacity: 0.8</code>
  or <code>margin: 2px 4px</code>) with the <b>Up</b>/<b>Down</b> and
  <b>PageUp</b>/<b>PageDown</b> keys. The unit delta can be controlled in the
  following ways:
    <li>0.1 unit: <b>Alt-Up</b>/<b>Down</b> (or plain <b>Up</b>/<b>Down</b> if
    the current value is in the range of <code>[-1; 1]</code>)</li>
    <li>1 unit: <b>Up</b>/<b>Down</b> (for values greater than <code>1</code>
    or less than <code>-1</code>)</li>
    <li>10 unit: <b>Shift-Up</b>/<b>Down</b> or <b>PageUp</b>/<b>PageDown</b>
    </li>
    <li>100 unit: <b>Shift-PageUp</b>/<b>PageDown</b></li>
  </li>

  <li>Hover the mouse cursor over the rule body. You will see a checkbox to the
  right of each property in the rule.</li>

  <li>Uncheck a box to <b>disable</b> the <code>border-color</code> property
  (i.e. temporarily remove it from the style). The property gets struck out, and
  the change is instantly reflected in the inspected page.
    <div class="screenshot"><img src="elements-styles-files/disabledProperty.png"></div>
  </li>

  <li>Double-click the <code>border-color</code> property value and
  change it to <code>Lime</code>, accept. Notice the property automatically get
  enabled with the updated value.


<h3 id="styles_add_new">Adding New Rules and Properties</h3>
  <li>You can add a new style rule to be considered in addition to those found
  in the stylesheets loaded by the page. Click the <b>New Style Rule</b>
  <span><img src="../images/add-style-rule-icon.png"></span> icon located in the upper-right corner of the styles editor. A new rule with an
  automatically suggested selector appears. Press <b>Enter</b> to accept the
  selector and start typing in the first property of the rule.

  <p class="note"><b>Note:</b> If you edit the selector so that it will not
  match the selected element, the rule will turn dimmed and obviously, will not
  be applied to the element. You should rarely need to do this.</p>
  </li>

  <li>You can also add a new property to any editable style by:
    <li>Double-clicking the blank space of the first or last rule lines (those
    with curly braces).</li>
    <li>Hitting <b>Tab</b> while editing the last style property value (or the
    corresponding rule selector if no properties have been added yet.)</li>
  </li>


</div>
<div class="collapsible">
<h2 id="metrics">Metrics Pane</h2>
  <li>The Metrics pane resides just below the Styles pane and allows you to
  examine and edit the current element’s box model parameters found in the
  computed style.</li>

  <li>The concentric rectangles contain the values for the <b>padding</b>,
  <b>border</b>, and <b>margin</b> properties (top, right,
  bottom, and left values for each of them.)</li>

  <li>For non-statically positioned elements, a <b>position</b> rectangle will
  be additionally displayed in the pane, containing the values of the
  <b>top</b>, <b>right</b>, <b>bottom</b>, and <b>left</b> properties.
      <div class="screenshot"><img src="elements-styles-files/metrics.png"></div>
  </li>

  <li>For <code>position: fixed</code> and <code>position: absolute</code>
  elements, the central field contains the actual
  <nobr><b>offsetWidth &times; offsetHeight</b></nobr> pixel dimensions of the
  selected element.</li>

  <li>All values can be modified by double-clicking them, like property values
  in the Styles pane (the changes are not, however, guaranteed to take effect,
  as this is subject to the concrete element positioning specifics.)</li>


</div>
<div class="collapsible">
<h2 id="persist">Persisting Changes</h2>
  <li>Upon an external style sheet rule modification, the respective resource
  text is updated in the Resources panel, and the revision history is
  stored for such style sheet resources until the DevTools window is closed.
  </li>

  <li>Activate the <b>Resources</b> panel, find <b>tutorial.css</b> in the
  resource tree. Note that the tree node is expandable. Click the arrow next to
  the node title, and you will see all the resource modifications that you have
  made above.</li>

  <li>Select any revision to see its differences from the original stylesheet
  resource, highlighted line-wise.
      <div class="screenshot"><img src="elements-styles-files/ruleDiff.png"></div>
  </li>

  <li>You can drag and drop a stylesheet revision node into most text editors
  to export the revision content.</li>



</div>
{{/partials.standard_devtools_article}}