Classes & selectors
Understand Site Designer's color-coded CSS selector system and how classes, IDs, and pseudo-states work.
Understanding the CSS selectors
Type, Class and ID selectors bind elements to design rules. Learn what they do and where they live in the Styles pane.
CSS selectors explained
A selector defines the elements to which a set of CSS rules applies. Learn how that works through Foundation's button classes.
Apply Styles section
The Apply Styles, In State, Design For and Reset controls at the top of the Styles pane, and what each one does.
Applying styles to a selector
Work from the broadest selection of elements down to a single one, and read the pink, blue and yellow indicators.
Working with classes
Create design variations with class selectors, understand specificity, and combine up to five classes on one element.
Framework classes
Use the Insert Framework Classes dropdown to search and add predefined Foundation, Bootstrap and Materialize classes.
Layout classes
Where the row and col class names in an imported project come from, and how to clean them up for CSS Grid.
Using the State dropdown
Set styles for Regular, Hover, Active, Focus, Visited and Out of View states from the In State dropdown.
Color coding recap
Pink for Type, blue for Class, orange for ID and gray for a deselected class — how to read the Style pane indicators.