This tutorial covers editing CSS styles using various DevTools aids.
Note: 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 Developer Channel.
Computed Style Pane
Invoke context menu on
THIS (Inspect Me) element
or hit Control-Shift-C to enter the Inspect Element mode and
click on it. Alternatively, if you have DevTools open, click the
button at the bottom of the Elements panel to point-click the element
in the page.
You will see several panes on the right-hand side of the panel.
If the Computed Style 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.
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.
Whenever possible, a computed trace element will contain a link to the
source code fragment that defines the respective rule.
The pane contains only properties from rules that
are applicable to the selected element. Dimmed properties are inherited from ancestor elements, including those that affect the computed style of this element. To view all CSS properties, enable the Show inherited checkbox.
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
Invoke the DevTools inspector on
THIS element as mentioned above.
The styles are displayed as closely to the original declaration as
possible. Some properties can have exclamation marks
() 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).
Note: 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.
If a property value (say, background-image) contains a URL
that has been loaded, you can click it to navigate to the corresponding
resource in the Resources panel.
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 Gear 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 As Authored option formats color values in the
way they are written in the CSS code.
Pseudo element styles, such as ::before,
::after, and many more -webkit-* ones, are also
exposed in the Styles pane, along with the rules inherited from ancestor
Double-click the worder property name, and type in
bo instead. A valid border property name will be
Hit Down several times to reach the border-color
suggestion, and press Enter or Tab to accept it and jump to the
value field (alternatively, you can press Right to accept the
suggestion and continue editing the field,) or Esc to cancel
the change. As usual, Shift-Tab traverses input fields in the reverse
While editing the border-color property value, delete
the clue word, and type in bl – in a moment, you
will see a suggestion: black.
Press Up or Down to cycle through all suggestions starting
with bl. Choose any color value you like, and press Enter
or Tab 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.
Besides iterating through available value keywords, you can also
increment/decrement numeric property values (like opacity: 0.8
or margin: 2px 4px) with the Up/Down and
PageUp/PageDown keys. The unit delta can be controlled in the
0.1 unit: Alt-Up/Down (or plain Up/Down if
the current value is in the range of [-1; 1])
1 unit: Up/Down (for values greater than 1
or less than -1)
10 unit: Shift-Up/Down or PageUp/PageDown
100 unit: Shift-PageUp/PageDown
Hover the mouse cursor over the rule body. You will see a checkbox to the
right of each property in the rule.
Uncheck a box to disable the border-color property
(i.e. temporarily remove it from the style). The property gets struck out, and
the change is instantly reflected in the inspected page.
Double-click the border-color property value and
change it to Lime, accept. Notice the property automatically get
enabled with the updated value.
Adding New Rules and Properties
You can add a new style rule to be considered in addition to those found
in the stylesheets loaded by the page. Click the New Style Rule icon located in the upper-right corner of the styles editor. A new rule with an
automatically suggested selector appears. Press Enter to accept the
selector and start typing in the first property of the rule.
Note: 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.
You can also add a new property to any editable style by:
Double-clicking the blank space of the first or last rule lines (those
with curly braces).
Hitting Tab while editing the last style property value (or the
corresponding rule selector if no properties have been added yet.)
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
The concentric rectangles contain the values for the padding,
border, and margin properties (top, right,
bottom, and left values for each of them.)
For non-statically positioned elements, a position rectangle will
be additionally displayed in the pane, containing the values of the
top, right, bottom, and left properties.
For position: fixed and position: absolute
elements, the central field contains the actual
offsetWidth × offsetHeight pixel dimensions of the
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.)
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.
Activate the Resources panel, find tutorial.css 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
Select any revision to see its differences from the original stylesheet
resource, highlighted line-wise.
You can drag and drop a stylesheet revision node into most text editors
to export the revision content.