CSS classes

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

How to create a CSS class
Default classes
How to edit a CSS class
How to link a CSS class to a node
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. From this panel you can create, search or edit classes. When you hit the + button another 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 (button, input and textarea) 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: 27/03/2024