Articles on: Layout & design

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


How to create and edit a CSS class


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.


Alternative way yo create a CSS class


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.


How to edit classes by extracting new styles



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


How to add CSS combinators to an existing class

Updated on: 28/03/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!