How to create and use CSS classes

Reuse style across elements in your project by creating and linking classes

1. How to create a CSS class
2. Default classes
3. How to edit a CSS class
4. How to link a CSS class to a node
5. How to create CSS combinators

1. How to create a CSS class

Classes are sets of styles that can be reused on multiple elements. They are defined on the project level and can be seen in the CSS Classes Panel. To create a CSS class:

• Go to the Left panel -> CSS
• From this panel you can create, search or edit classes.
• Click on the + button and a panel will open where you can give our class a name and the desired styles

Another way to create a class is directly on the element where you want to use it. From the Classes panel in the Inspector you can search for an existing class or create a new one. When you create a new class this will be immediately linked to the selected element and all the styles on the element will be transferred onto the class by default. However there is a toggle button with the label 'Extract element styles' and you can choose whether to move the styles in the class or keep them on the element.

2. Default classes

Every project comes with three default classes that are applied on the elements corresponding to the names of the classes. You cannot delete or rename them, but you can edit the styles.

When you add one of these three elements in your project you will notice that they already have their default class linked and it cannon be removed. If you change the styles from one of these classes you will notice that all the new elements that you will add will also inherit these changes.

3. How to edit a CSS class

You can edit the class styles from the Edit Class Panel as you would in the Advanced Inspector. Another way is by setting styles o the element first and the transferring them onto the class by pressing the 'Extract new styles' button at the top of the Edit Class Panel. This option is only available if you edit the class from the Inspector panel.

Keep in mind that the changes you make on the class will affect all the elements that are linked to that class, not only the selected element.

4. How to link a CSS class to a node

In order to link a class to a node simply search for the desired class in the search input from the Classes section and select the class. You will be able to see the changes immediately in the Stage area.

You can also toggle CSS classes to see how elements look with or without them.

5. How to create CSS combinators

To create descendant, child, adjacent or general sibling combinators in TeleportHQ:

• Go to Left panel -> CSS Classes tab
• Right click the CSS class you want to add a combinator to
• Go to Add CSS combinator and select one of the options
• In the newly opened panel add the type of element you want to target (ex: img, p, h1, etc.)
• Style the combinator class using CSS properties

Updated on: 28/03/2025