Class selectors explained

A CSS class is a reusable style definition you write once and apply to as many elements as you like. In Site Designer, classes are your primary tool for styling — they keep your CSS organized, your markup clean, and your designs consistent across the entire project.

What a class is

In CSS, a class is written as .classname in your stylesheet. Any element that carries that class name in its HTML picks up the associated styles automatically. Change the class definition once and every element using it updates instantly.

This is the core power of class-based styling: write once, apply everywhere.

Adding a class to an element

1. Select the element

   Click the element on the canvas. The Design pane opens on the right.

2. Open the Element tab

   Click the Element tab in the Design pane. You will see a class field at the top.

3. Type a class name

   Click the class field and type a name. Use lowercase letters, numbers, and hyphens — for example, hero-title or card-body. Press Enter or click outside the field to apply.

4. Style the class

   With the element selected and the class active, open the Style tab to set colors, typography, spacing, and more. Every change you make is written to that class, not to the element directly.

The class suggestion dropdown

As you type in the class field, Site Designer shows a dropdown of existing classes already defined in your project. This is useful for two reasons:

• Apply existing styles instantly — select a class from the list to reuse styles you have already defined on another element.
• Avoid typos and duplicate names — if you see card-title in the list, you know not to create card-titel by mistake.

Adding multiple classes to one element

An element can carry more than one class at a time. Click the + button next to the class field to add a second (or third) class. Each class contributes its own styles, and properties from later classes override properties from earlier ones when they conflict.

This multi-class pattern — a base class plus one or more modifier classes — is the foundation of scalable CSS. See Combining classes for a full walkthrough.

How editing a class affects all elements

Because a class is a shared definition, any style change you make while that class is active immediately propagates to every element using it across the entire project.

For example, if you change the font-size on .section-heading, every element carrying .section-heading — on every page of your project — updates at once.

The global nature of classes

Classes live in your project’s CSS, which is shared across all pages. A class created on the homepage is immediately available on the contact page, the blog, and everywhere else. This global scope is intentional — it is what allows a single change to update the whole site.

To keep things organized as your project grows, follow a consistent naming convention from the start. The class naming best practices article covers naming patterns that scale well.