CSS preview pane

The CSS pane shows the full set of CSS rules being applied to the selected element — including your own classes, framework utilities, and inherited styles. It is read-only, making it a safe place to learn and debug without accidentally changing anything.

What the CSS pane shows

When you select an element, the CSS pane displays every CSS declaration that affects it, organized by the rule that introduced it:

• Your project classes — Rules from classes you created in the Design pane.
• Framework classes — Utility classes from Foundation, Bootstrap, or Materialize, if your project uses one.
• Global stylesheet rules — Any rules imported from external or global CSS files.
• Inherited properties — Properties like font-family, color, and line-height that cascade down from ancestor elements.
• Browser defaults — The browser’s built-in user-agent stylesheet rules.

Each rule block shows its source selector — the class name, tag, or ID that applied it — so you can immediately see where a style is coming from.

Understanding cascaded and overridden styles

When two rules apply the same property, the CSS pane shows both but strikes through the one that is overridden. A strikethrough means the property exists in the stylesheet, but a more specific or later rule is winning.

Source attribution

Each rule group in the CSS pane has a header showing its source:

• Class name (e.g., .hero-title) — A class from your project stylesheet.
• Tag selector (e.g., h2) — A rule targeting the element by its HTML tag.
• Inherited from <section> — A cascaded value from an ancestor element.
• Browser default — The user-agent stylesheet.

This attribution makes it easy to pinpoint which rule to change when a style behaves unexpectedly.

Copying CSS

Click the Copy CSS button at the top of the pane to copy all displayed rules to your clipboard. This is useful when:

• You want to paste styles into an external stylesheet or code editor.
• You want to share a snippet with a colleague.
• You are migrating styles from one project to another.

You can also hover over an individual declaration line and click the copy icon that appears to copy just that one property.

Limitations

The CSS pane reflects the rules Site Designer manages. It does not show:

• CSS injected at runtime by JavaScript (e.g., inline style attributes set dynamically).
• Styles from @import rules loaded from external CDNs that Site Designer has not indexed.

For full computed-style inspection, open Live Preview in your browser and use its DevTools.