How to create a CSS class

In TeleportHQ, the fastest way to create a CSS class is from an element you've already styled: select it, type a name in the Classes section of the right panel and click Create class. The element's styles move into the new class, ready to reuse. You can also start an empty class from the Classes tab of the Design Language panel.

Before you start#

• CSS classes are available on every plan.
• You need a role that can change CSS classes. Without it, TeleportHQ shows "Your current role does not have permission to create classes".
• New to classes? Read What are CSS classes, and why use them?

Create a class from a styled element#

Use this when one element already looks the way you want, for example a product card.

1. On the canvas, click the styled element, for example your first product card.
2. In the right panel, make sure the Visual tab is open.
3. In the Classes section, click + at the right of its title. A field appears with the text Type to search or create new class. If the element already has a class, the field is already there.

4. Type a name, for example product-card.
5. Click Create class product-card under the field, or press Enter.

The Create class panel opens next to the right panel, and the element now uses the new class. The Extract element styles switch is on: the element's styles have moved into the class, including its styles for smaller screens and its hover and other state styles. A text style on the element is linked to the class too.

Values that come from a component setting or from data, for example a color set by a component property, can't live in a class. They stay on the element.

Keep the styles on the element instead#

In the Create class panel, turn off Extract element styles. The styles go back onto the element, and the new class starts empty.

Create an empty class from the Classes tab#

1. Press Esc, or click an empty part of the canvas, so no element is selected.
2. At the top of the right panel, click the Classes tab.
3. At the top of the tab, next to CSS Classes, click + (tooltip Create New Uncategorized Class). To create the class inside a category instead, point at the category name and click its + (tooltip Create New Class in Category).

4. A class called classname is created and the Edit class panel opens. With the top +, the class goes into Uncategorized.
5. Click the name field at the top of the panel, type a new name, for example section-wrapper, and press Enter.
6. Add styles in Properties. See How to edit a CSS class.

Check that it worked#

The class appears in the Classes tab as .product-card. On the element, the Classes section shows .product-card. To use the class on other elements, see How to apply or remove a CSS class.

Troubleshooting#

"Class name is invalid" Class names can contain letters, numbers, hyphens (-) and underscores (_). They must start with a letter, an underscore, or a hyphen followed by a letter. Spaces aren't allowed. For example, use product-card, not product card or 1card.

"Please enter a valid value" The name field is empty. Type a name first.

The list shows a class instead of Create class A class with exactly that name already exists. Clicking it applies the existing class to the element. To make a new class, choose another name.

Nothing happens when I click Create class A class with the same name in different capital letters already exists, for example Hero when hero exists. TeleportHQ doesn't create the new class and shows no message. Pick the existing class from the list, or choose a different name.

There's no Create class option Create class only appears when one element is selected. With several elements selected, the field only searches existing classes (Search for a class).

"Class name already defined" You see this when you rename a class in the panel's name field. Another class, or a text style, already uses that name. Choose another name.

Good to know#

• A class created from an element goes into the first category of your class list, usually Teleport Default Classes. It's still your own class: you can rename, move or delete it. To move it, pick another category in the panel's Category list, or see How to organize and clean up CSS classes.
• To duplicate an existing class, right-click it in the Classes tab and choose Duplicate.