What are CSS classes, and why use them?

A CSS class in TeleportHQ is a named group of styles, such as card with a white background, rounded corners and a shadow. You apply the class to many elements, and when you edit the class, all of them change at once. You manage classes in the Classes tab of the Design Language panel, and apply them to an element in the Classes section of the right panel.

When to use a CSS class#

Use a CSS class in TeleportHQ when the same design repeats across your site:

• every product card on a page
• all primary buttons
• every section's padding and maximum width

Without a class, you'd style each element separately, and changing the design later means editing each one. With a class, you change it once.

A class can hold any style: colors, sizes, spacing, borders, shadows, hover and focus styles, and different values for smaller screen sizes. Sites built with the TeleportHQ AI already use classes for most of their design, so editing a class is often the fastest way to change an AI-built site.

Where to find CSS classes#

CSS classes appear in two places in the TeleportHQ editor.

The Classes tab of the Design Language panel lists every class in your project. Press Esc so no element is selected, and close the AI Assistant, comments or code view if one is open. Then click Classes at the top of the right panel. The tab is titled CSS Classes. Here you create, search, edit, organize and delete classes.

The Classes section of the right panel shows the classes on the selected element. Select an element: the section sits near the top of the Visual tab, after Attributes and before States. Here you apply, remove and create classes for that element.

The same class list is also in Project settings: click the Project settings cog at the bottom of the left sidebar, then under Appearance click Design language and choose Classes.

To jump to one class, press Ctrl+P (Cmd+P on a Mac), type part of its name and pick the result labelled Class. It opens in the Classes tab. See How to use the command palette.

How classes and element styles work together#

• The element's own styles win. If a class sets a blue background and you set a red background on the element itself, the element is red. The class stays blue for every other element.
• In the right panel, class values show in grey. Point at one to see Inherited from CSS class and the class name. When the value comes from the class's style for a smaller screen, the screen width shows too, for example @767px. Some boxes show a class value by its CSS name, for example absolute in Position instead of Freestyle. See How the style panel works.
• An element can have several classes. If two classes on the same element set the same style, the class that comes later in your project's style sheet wins. That is usually the class created later, whatever order the classes are listed in on the element. To keep it predictable, set each style in only one of the classes.

What happens when you delete a class#

Deleting a CSS class removes its styles from every element that used it. The elements lose that look, and nothing is copied back onto them. This is different from deleting a saved color or text style, where elements keep the values.

Before you delete a class that's in use, check which elements use it: in the Classes tab, right-click the class and choose Highlight linked nodes.

Default classes#

Every TeleportHQ project has a category called Teleport Default Classes. Its classes show a default label.

• button, input, textarea, list and list-item are added to every new element of that type. For example, edit button to change how your new buttons look.
• teleport-show is also built in.
• The theme's thq- classes, such as thq-heading-1, thq-body-small, thq-button-filled and thq-card, style headings, text, buttons and cards in the theme's look.

You can edit the styles of default classes. You can't rename or delete them.

What you can do with classes#

• How to create a CSS class, from the panel or from an element you've already styled.
• How to apply or remove a CSS class on an element.
• How to edit a CSS class, including its hover states and mobile styles.
• How to style elements inside a class (combinators), for example every image inside a card.
• How to organize and clean up CSS classes, with categories, filters and bulk delete.

Good to know#

• CSS classes are available on every plan. Creating, editing and deleting classes needs a role that can change CSS classes. The Editor role can apply existing classes but can't change them. See What can each role do?.
• Class names can use letters, numbers, hyphens and underscores, and can't start with a number.
• A class can't be renamed to a name that a text style already uses.
• Classes that no element uses are left out of your exported code. To keep them, turn on Export unused classes: click the Project settings cog at the bottom of the left sidebar, then Editor → Preferences → Editing, under Export and AI. It's off by default.
• Categories only organize classes in the editor. They don't change your exported code.