HTML tags

Style HTML tags to set default styles for batches of elements across your site.

HTML tags let you set default styles for a type of element and style large batches of elements at once. The styles you set on an HTML tag are called tag styles. Use them to kickstart your design, then override the defaults with classes and combo classes as you build. Tags are also how you style elements inside rich text fields.

Tags you can style

Tags are labeled pink, differentiating them from blue classes and green states. Here’s a list of the element types with tags that can be styled:

Text and content:

• Body (All Pages)
• All H1 Headings through All H6 Headings
• All Paragraphs
• All Links (text links, buttons, link blocks)
• All Images
• All Unordered Lists, All Ordered Lists, and All List Items
• All Labels
• All Bolds (inline bold text) and All Italics (inline italic text)
• All Block Quotes
• All Figures and All Figure Captions (in rich text)
• All Code and All Pre Tags
• All Superscripts and All Subscripts

Structure and page layout:

• All Divs
• All Sections
• All Navigation
• All Headers
• All Footers
• All Mains
• All Articles
• All Asides
• All Addresses

Forms:

• All Forms
• All Inputs (text fields and submit buttons)
• All Textareas
• All Select Fields

Definition lists:

• All Definition Lists
• All Definition Terms
• All Definition Descriptions

Elements that don’t have a tag in this list need classes and combo classes for styling.

Tag styles can also come from a Shared Library. When a Library is installed, its tag styles sit below your site’s own tag styles, so your own tag styles always win. Learn more about using shared Library tag styles.

Style the Body (All Pages) tag

Setting typography styles on the Body (All Pages) tag cascades down to all typography across the entire site. Here, “Body” refers to an entire site page, which contains all of the other elements on the page. It’s good practice to set the default font family, font size, and line height on the Body (All Pages) tag, then override those styles on H1 to H6 heading tags.

You can style the Body (All Pages) tag in two ways:

• Select the Body element and choose the Body (All Pages) tag from the Style selector field dropdown in the Style panel
• Select any element and choose the Body (All Pages) tag from the inheritance menu in the Style panel — all elements inherit styles from the Body (All Pages) tag

To access the Body (All Pages) tag:

1. Select the Body element on any page
2. Click the Style selector field in the Style panel
3. Under HTML Tag, choose Body (All Pages)

To view and select a tag on an element that has a class applied to it using the inheritance menu:

1. Select an element with a class
2. Click the inheritance menu link above the Style selector field in the Style panel
3. Choose the tag (e.g., All Paragraphs)
4. Add styles

Changes you make in Body (All Pages) are a starting point, which is an important distinction between tags and classes — tags let you set the default styling for entire batches of elements. If you make style changes with the Body (All Pages) tag selected, all new and existing elements inherit styles from it. The Body (All Pages) tag lets you set default styles like font, font size, font color, line height, and a default background color. You can use classes to override any default styles on your site.

If a Shared Library you installed includes Body (All Pages) tag styles, those styles apply first, and your site’s own Body (All Pages) tag styles override them.

Style heading tags

When you add a Heading to your site, it inherits any styles set on the Body (All Pages) tag. You can check style inheritance using the inheritance menu above the Style selector field in the Style panel.

To override a style without adding a class to each heading, click the Style selector field and choose All H1 Headings. The font still shows as inherited from Body (All Pages), which is expected. When you change the font, it updates all of your H1s.

For example, if your default font is set to Tahoma on the Body (All Pages) tag, the font on a new H1 heading also defaults to Tahoma. If you set the All H1 Headings tag to Playfair, your H1 headings are Playfair. If you add a class to a specific H1 and set the font to Raleway, that H1 (and other H1s with that class) is Raleway.

Elements look up the hierarchy for the nearest styling information. An H1 might have a class it uses to grab styling information. If that information is missing in the class, the H1 looks to the next level and takes its styling cues from the All H1 Headings tag, which takes its styling cues from the Body (All Pages) tag. In short, tags set default styles, and classes override those defaults.

Typography styles on headings are usually set apart from paragraph styles. It’s common practice to set the same font family on each heading tag (H1 to H6).

Style paragraph tags

With any paragraph selected that doesn’t have a class applied to it, click the Style selector field in the Style panel and choose All Paragraphs to make style adjustments.

For example, to set a unitless line height that affects each line of text:

1. Click the Line height field under Typography
2. Adjust the value (e.g., to 1.6)
3. Set it to unitless by typing a hyphen or choosing a hyphen from the unit dropdown

Unitless means the line height scales proportionally with the font size.

You can also use the All Paragraphs tag to create space between paragraphs, similar to what the Return or Enter key on a keyboard does. Line height makes sure text doesn’t bleed together from line to line, and bottom margin creates vertical space between paragraphs.

Style link tags

You can add a link to your site by:

• Choosing Link Block or Text Link from the Add panel > Links
• Double-clicking existing text on the canvas
• Selecting the text you’d like to link and creating a nested text link

To make default style changes to your link:

1. Click the Style selector field
2. Choose the All Links tag
3. Change text decoration or font color

Any new links you add inherit the default styles you’ve set on the All Links tag.

Style structure and form tags

You can style the tags for structure, forms, and definition lists the same way you style headings and paragraphs.

A Box can use any of these tags: Div, Header, Footer, Nav, Main, Section, Article, Aside, Address, and Figure. Each tag has its own selector, so styling All Sections affects only Boxes set to the Section tag.

To style one of these tags:

1. Select a Box
2. Go to the Settings panel and choose a tag from the Tag dropdown (e.g., Section)
3. Click the Style selector field in the Style panel
4. Choose the tag (e.g., All Sections)
5. Change the styles

The styles apply to every element that uses that tag, unless a class on the element overrides them. New tags start without styles, so your site looks the same until you change one.

Style pre tags in code blocks

You can apply styles to <pre> tags in code blocks from the Style panel. Learn how to style a code block. This lets you format displayed code snippets with custom fonts, colors, spacing, and background styling.

Key styling options include:

• Typography — font size and font family
• Background color — improves readability
• Padding and spacing — keeps code snippets clean and easy to scan
• Line height — improves accessibility

Create a tag-based style guide

A style guide lets you set site default styles early in the design process. Webflow created a tag-based style guide you can copy and paste to kickstart your next website. Be sure to password protect or disable search engine indexing for the style guide if you don’t want it to show up on Google or other search engines.

Create your own style guide template

Style guides are dedicated pages where common elements are organized and styled so you can preview all of your default styles. You can create a style guide template to speed up style guides for each new site you create.

To create a style guide template:

1. Create a site with a single page
2. Add a section to the page
3. Add at least one of each element that has an HTML tag you can style
4. Leave all of these elements without classes

Use the template on a new site

To use this template on a new site:

1. Create a new page in your new site
2. Give the page a name (e.g., “Style guide”)
3. Save the page as a draft
4. Go to the template site
5. Select and copy the section
6. Paste it into the “Style guide” page of your new site
7. Select each element and style the HTML tag of that element