Resetting styles

As you build a site, styles accumulate from multiple sources — framework defaults, inherited values from parent elements, and your own class rules. Knowing how to clear unwanted styles is just as important as knowing how to set them.

Why styles accumulate

Every element in a webpage is subject to three sources of styles simultaneously:

1. Browser defaults — each browser ships a built-in stylesheet that gives <h1> a large size, <a> a blue color, <p> some margin, and so on.
2. Framework styles — when you use Foundation, Bootstrap, or Materialize, their CSS resets or normalizes browser defaults and adds component styles.
3. Your own classes and inline rules — everything you write in Site Designer.

These layers cascade on top of each other. The property you see on an element may be coming from any of these sources, which is why a property you set in one class sometimes seems to have no effect — it is being overridden lower in the stack.

Resetting a single property

To clear a specific property value on a class:

1. Select the element and make sure the target class is active.
2. Click the value field for the property you want to clear.
3. Delete the value and leave the field empty, or type initial (resets to browser default), unset (acts as inherit for inherited properties, initial for others), or auto (lets the browser calculate the value).

Site Designer shows a small reset icon on the right side of each property row when you hover over it. Clicking this icon clears your override and restores the inherited or browser-default value.

Resetting all styles on a class

To wipe all the properties you have set on a class:

1. In the class list on the Design pane’s Element tab, right-click the class name.
2. Choose Reset all styles.

This removes every property you defined on that class. The class name remains applied to the element, but it now carries no rules — effectively making it a blank slate you can restyle from scratch.

The difference between reset and inherit

These two concepts are often confused:

Reset (using initial) — Removes your override and sets the property to its specification-level default, ignoring the parent element entirely. For example, color: initial on a <span> inside a red <p> will not make the text red — it will be the browser default (usually black).

Inherit — Explicitly tells the property to pull its value from the parent element. color: inherit on that same <span> inside a red <p> will make the span text red, matching the parent.

Use inherit when you want parent values to flow down. Use initial when you want to strip everything and start fresh.

Framework resets and normalize

All three frameworks that Site Designer supports include a CSS reset or normalize as part of their stylesheet. This is why browser defaults for margins, paddings, and box-sizing are often already removed when you use a framework project — the framework’s reset ran first.

If you start a blank project (no framework), browser defaults are in full effect until you add your own reset rules. A common approach is to add box-sizing: border-box globally and zero out margins and padding on common elements before you start styling.