CSS classes

How to apply or remove a CSS class

September 15, 2026
How to apply or remove a CSS class

In TeleportHQ, you apply a CSS class from the Classes section of the right panel: select the element, type the class name and pick it from the list. The element takes on the class's styles right away. To take a class off, click Remove class (−) on the class's row. Removing a class from one element doesn't change the class or any other element.

Before you start

  • Create the class first. See How to create a CSS class.
  • You need a role that can edit pages. The Editor role can apply and remove classes, but can't create or edit them.

Apply a class

  1. On the canvas, click the element, for example your second product card. To apply the class to several elements at once, select them all.
  2. In the right panel, make sure the Visual tab is open.
  3. In the Classes section, click + at the right of its title. If the element already has a class, the search field is already there.
  4. Click the field and type part of the class name, for example product.
  5. In the list, click the class, for example product-card.

The class shows in the Classes section as .product-card, and the element takes on its styles.

Check that it worked

The element on the canvas now looks like the other elements that use the class. In the right panel, style boxes show the class values in grey. Point at one to see Inherited from CSS class and the class name.

What's on a class's row

Each class on the element has its own row in the TeleportHQ Classes section:

A class row in the TeleportHQ Classes section with four controls numbered: 1 the checkbox, 2 Edit class, 3 Remove class, 4 Add rendering condition
  1. The checkbox turns the class off and on, on the canvas only, for a quick before-and-after look. The class name is crossed out while it's off. This isn't saved: the class is back on when you reload the project, and your published site always uses it.
  2. Edit class opens the class's styles. See How to edit a CSS class.
  3. Remove class (−) takes the class off this element.
  4. Add rendering condition (an eye with a small C) applies the class only when a condition is true. See How to show or hide elements based on a condition.

The + between Remove class and the eye adds a combinator to the class. See How to style elements inside a class (combinators).

Remove a class from an element

  1. Select the element.
  2. In the Classes section, on the class's row, click Remove class (−).

The class is removed from this element right away, with no confirmation. The element loses the class's styles. The class itself, and every other element that uses it, stays the same.

Remove all classes from an element

  1. In the Classes section, click − at the right of the section title. It replaces the + once the element has a class.
  2. In the Remove Classes from node window ("You are about to remove all classes from the node"), click Remove.

This works on one element at a time.

Troubleshooting

The class is applied, but one style doesn't change The element has its own value for that style, and the element's own styles win over classes. Clear the value in the right panel to use the class value. Or, to make the element's change part of the class, open the class with Edit class and click Extract new styles. See How to edit a CSS class.

The class doesn't appear in the search list Classes already on the element aren't listed again. The search also matches capital letters exactly: type Card to find Card, not card.

My element changed when I edited it, but other elements with the same class didn't Style changes made in the right panel go onto the selected element, not into the class. Edit the class itself to change every element. See How to edit a CSS class.

"Your current role does not have permission to add or update classes" Your role can apply classes but can't open them for editing. Ask a workspace admin for a role that can change CSS classes.

Good to know

  • An element can have several classes. They're listed in the Classes section. If two of them set the same style, see What are CSS classes, and why use them?.
  • To see every element that uses a class, open the Classes tab of the Design Language panel, right-click the class and choose Highlight linked nodes or View linked nodes.
  • The layers tree shows each element's classes next to its name. To hide them, click the Project settings cog at the bottom of the left sidebar, then Editor → Preferences → View, and under Layers turn off CSS classes in the tree view.
Share

Related Articles

What are CSS classes, and why use them?

A CSS class in TeleportHQ is a named group of styles you apply to many elements, so changing the class restyles all of them at once; you manage classes in the Classes tab of the Design Language panel and apply them in the Classes section of the right panel.

How to create a CSS class

In TeleportHQ, select a styled element, type a name in the Classes section of the right panel and choose Create class to turn its styles into a reusable class; or click + in the Classes tab of the Design Language panel to start an empty class.

How to edit a CSS class

In TeleportHQ, click a class in the Classes tab of the Design Language panel, or click Edit class on its row in the right panel, then change its name, Properties, States or Media Query Properties; every element using the class updates.

How the style panel works (and where values come from)

When you select an element in TeleportHQ, the right panel shows its settings in Visual and Advanced tabs, always in the same order; values you set show in normal text, while grey values come from a CSS class, a larger screen size, a parent or the browser, and pointing at one shows where it comes from.

How to show or hide elements based on a condition

In TeleportHQ, you show an element only when a condition is true, such as "stock equals 0" or "the menu is open", by selecting it, turning on the Conditional Rendering switch near the top of the right panel and building the condition from a value, an operator and a comparison value; it works in every project, website or web app.