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

Access the tag of an element and edit its default settings by following these steps:

  1. Add the element to the canvas from the Element Panel (A)
  2. Select the element
  3. In the Style Panel (S), click into the selector field
  4. Select the tag (e.g. All Paragraphs)
  5. Add styles

You can also quickly select the tag for elements that have a class using the Inheritance Menu. Follow these steps:   

  1. Select an element with a class
  2. In the Style Panel, click on the Inheritance Menu on the right of the selector field.
  3. Select the tag (e.g. All Paragraphs)
  4. Add styles

Tags have a special pink color, 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.

Examples

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:

  1. Select the body element and select the tag from the selector field menu
  2. 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.