Browser Diagnostics Ladder

Matched Rule to Computed Style

A class rule matches one paragraph, then computed style explains the visible color and weight.

Program

The second diagnostic ladder follows one CSS rule from source, through rule matching, into computed style, and finally into visible text.

matched_rule_computed_style.html
Visuals: captured from real browser rendering
<style>
.notice { color: #0f766e; font-weight: 700; }
</style>
<p class="notice">Saved locally</p>

  1. Source delta: add a notice rule.

    A CSS notice rule appears in the source.
    Source delta: the stylesheet defines the rule to follow.

  2. Browser structure: find the matching element.

    The paragraph has class notice, so it can match the rule.
    Browser structure: the element class gives the selector a target.

  3. Diagnostic surface: show the matched rule.

    The diagnostic surface shows the matched color and font weight declarations.
    Diagnostic surface: matched rules explain which declarations apply.

  4. Rendered consequence: compute visible style.

    Computed style resolves the paragraph to teal bold text.
    Rendered consequence: computed style controls the painted text.

  5. Learner check: name the source of the style.

    The learner check ties the teal text back to the matched .notice rule.
    Learner check: the class match is the reason the text is teal and bold.
matched rule A matched rule is a CSS selector that applies to the selected element.
computed style Computed style is the resolved value the browser will use for painting.