HTML tags

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
HTML tags

Tags give us an easy way to control the default styling for a particular element type. For example, you can define the default styles for all paragraphs by editing the all paragraphs tag. Adding a class with styles will override these default styles.

In this lesson
  • Accessing tags
  • Styling tags vs classes
  • Examples

Accessing tags

To access the tag of an element and edit its default settings:

  1. Add the element to the canvas from the Element panel
  2. Select the element
  3. Click the selector field in the Style panel
  4. Select the tag (e.g. all paragraphs)
  5. Add styles

To select the tag for elements that have a class using the inheritance menu:   

  1. Select an element with a class
  2. Click the inheritance menu above the Style panel  
  3. Select the tag (e.g. all paragraphs)
  4. Add styles

Tags are labeled pink, differentiating them from blue classes and green states. Here are all the element types which have tags that can be edited:

  • Body (all pages)
  • H1 Heading
  • H2 Heading
  • H3 Heading
  • H4 Heading
  • H5 Heading
  • H6 Heading
  • Paragraph
  • Link (text links, buttons, link blocks)
  • Image
  • Unordered list
  • Ordered list
  • List item
  • Label
  • Strong (inline bold text)
  • Ems (inline italic text)
  • Block quote
  • Figure (in rich text)
  • Figure Caption (in rich text)

All other elements require styling using classes and combo classes.

Styling Tags vs Classes

You can always style the entire project using only classes. But styling tags can be a big time-saver depending on the size of your project.

It’s common practice to define the default styling for all the common elements when starting a big project.

Pro tip — creating a style guide

You can create a separate page where all of the common elements are organized and styled so it’s easy to preview all the default styles. Check out Creating and reusing a style guide template.


Body (All Pages) tag

Setting typography styles on the Body (All Pages) tag will cascade down to all typography in the entire project. It’s good practice to set the default font family, font size, and line height on this tag and then override those styles on H1-H6 heading tags. You can style the Body (All Pages) tag in two ways:

  • Select the body element and select the tag from the selector field menu
  • Select any element and choose the tag from the inheritance menu — that’s because all elements inherit styles from this tag.
All H1 Headings tag

Add a heading or select an existing heading in your project.In the Style Panel you can click on any of the orange icons or labels to see if the text styles are being inherited from the Body (All Pages) tag.  


To override the text styling set on the Body (All Pages) tag, select the All H1 Headings tag and add styles to that.

Any changes made to the All H1 Headings tag will affect all H1s throughout your project and any new H1s you add. This won’t prevent you from using classes to make unique H1s. You can add a class and add styles to a specific H1 Heading to override the default styles coming from the All H1 Headings tag.

Pro tip
Heading typography styles are usually set apart from paragraph styles. It’s common practice to set the same font family on each heading tag (H1-H6).
All Links tag

Add a Link to your project by selecting it from the Elements Panel. Alternatively, you can double click into existing text-content, select some text, and create a link.

Once your link has been added, you can go to the Selector Field and select the All Links tag


From here you can make any style changes you want, such as text decoration or font-color. This will set the default link styles for all links so any new link you add will inherit them.


Keep in mind, though, that All Links tag affects other types of links besides text links. For example, let’s say you make changes to the All Links tag font color with the hover state selected, and then add a button element. That button element will now have the same hover effect as any other link element. You will need to override the hover state styles on your button class.

All Images tag

Add an image to your project by selecting the image element from the Element Panel or by dragging in an image file from your computer.

Selecting the element tag for images is the same as the first two examples—select an image element on the canvas and use the Selector Field to select the All Images tag.

Once selected, you can make changes to the default styles and settings of images. For example, you can set All Images to have rounded corners. Now any new image you drag in from the Asset Panel will inherit the rounded corners style.


Browser support

Can I Use ? Data on support for the feature across the major browsers from

Was this helpful?

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form