Classes & selectors
Understand Site Designer's color-coded CSS selector system and how classes, IDs, and pseudo-states work.
The color-coded CSS selector system
Site Designer color-codes your selectors so you can instantly see whether a style comes from a class, ID, element, or pseudo-class.
Class selectors explained
Classes are the main way you apply styles in Site Designer. Learn how to add, edit, and manage them.
ID vs. class
When to use a CSS ID and when to use a class — and how Site Designer handles both.
Predefined framework classes
Foundation, Bootstrap, and Materialize each provide utility classes you can apply directly in Site Designer.
Combining classes
Apply multiple classes to one element to combine base styles with modifiers, utilities, and framework classes.
Pseudo-classes and state styling
Style elements in :hover, :focus, :active, and other states using the pseudo-class dropdown in the Design pane.
Resetting styles
How to clear inherited or unwanted styles from an element or class in Site Designer.
Best practices for naming classes
Consistent class names make your projects easier to maintain and hand off. Follow these naming conventions.
