Use HTML element tags to control the default styling for a particular element type.
HTML tags are an extraordinary way to make changes to common elements like headings, paragraphs, text links, images, et cetera (which is Latin for "and the rest"). As we already know, with any paragraph selected, we can go in and modify the default way paragraphs are styled in a project by opening up the All Paragraphs tag. Simply make a change — like the default paragraph line height, or maybe something like margin. And this will apply — this change will affect all paragraphs in the project by default.
What we want to do in this video is show off this project. It's a simple project. With one page. And on that one page is a section. In that section is a ton of content. A bunch of elements.
But there's one more thing about this page: none of the elements have classes. (There aren't any classes to add styling.) And this is on purpose. What we'll do is select the section, and copy it.
Over on another project, we have this blank page.
And we'll simply paste in the section. Now. Why are we doing this? What benefit do we have? Well, we now have at least one of each common element that has a tag we can style. So we can get all our tags that we plan to use in this project set up — this saves us a ton of work so we don't have to create separate classes each and every time we want to set something. Like this All Paragraphs tag we're styling now.
Now that we've styled our All Paragraphs tag, let's go to another page in the project and have a look. Let's drop a few paragraphs in. We can simply place in one paragraph, then copy and paste it a couple times. And as we can see, it looks great. Because the line height, the margin — everything we changed before in the tag? It's being inherited. Of course, it's being inherited from the All Paragraphs tag.
And that's it! One quick, final note: the only tag we're not showing here is the Body (All Pages) tag. Since you can't copy/paste a page's body, we can simply make changes there from any page in the project by going over to the page's body then selecting the Body (All Pages) tag. These are top-level changes that will be inherited by any children of the body, unless they have styling that overrides this. The Body (All Pages) tag, among other things, is amazing for changing the default font.
But that's using copy/paste and HTML tags to set the default styling for all sorts of elements in a project.
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 override those styles on H1-H6 heading tags.
You can style the Body (All pages) tag in two ways:
To access the Body (All pages) tag:
To select the tag for elements that have a class using the inheritance menu:
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, new elements will inherit styles from the Body (All pages) tag. The Body (All pages) tag let’s 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 in your project.
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 edited:
All other elements require styling using classes and combo classes.
When you add a Heading, it inherits any styles set on the Body (All pages) tag. (Don’t forget — you can check inheritance by clicking the property label from the inheritance dropdown on the top-right of the Selector field in the Style panel.)
If you want to override a style without having to add that class to each heading — click into the Selector field and choose All H1 Headings. You’ll see the font is still being inherited from Body (All pages), which is expected. Now when you change the font, it will update all your H1s.
Note: Tags help you set the defaults and classes let you override those defaults.
For example, if your default font is set to Tahoma on the Body (all pages) tag, when you add an H1 heading, it will be Tahoma. But if you set All H1 Headings tag to Playfair, your H1 headings will be Playfair. If you add a class and set the font to Raleway, your H1 will be Raleway.
Note: Elements look up the hierarchy for the nearest styling information.
An element, like an H1, might have a class where it grabs styling information. If that information is missing, 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.
Pro tip: 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-H6).
With any paragraph selected, you can click into the Selector field in the Style panel and access the All Paragraphs tag to make style adjustments.
For example, you can set a unitless line height that affects each line of text:
Unitless means the line height scales proportionally with the font size.
You can also use the All Paragraphs tag to add space between paragraphs. Line height makes sure text doesn’t bleed together from line to line, and bottom margin allows you to group paragraphs visually.
Add a Link to your project by selecting it from the Elements panel.
To add a link, you can also:
To make default style changes to your link:
Any new links you add will inherit any default styles you add.
Note: The All links tag affects other types of links besides text links. For example, if you make changes to the All links tag font color with the hover state selected, and then add a button element, the button element will have the same hover effect as any other link element. Override the hover state styles on your button class.
Tags are helpful for setting defaults, but they can make sweeping changes if you’re not tracking the elements using the tags — be sure to do a visual inspection after making tag changes.
A style guide lets you set project defaults when early in the design process. Webflow created a tag-based style guide you can copy and paste into your project into every new project to kickstart your next website with a clean style guide.
Note: Be sure to add a password to the style guide if you don’t want it to show up on Google (or other search engines).
Create a style guide as a separate page where your common elements are organized and styled so it’s easy to preview all the default styles.
To create the template:
To use this template in a new project:
Now you can save a lot of work and time and set up all the tags that you plan to use in your project.
Don’t forget to style the Body (All pages) tag — since you can't copy/paste a page's body, you can’t include it in your style guide. You can select the body element on the “Style guide” page, then select and style the Body (All Pages) tag. Learn more about the Body element.
Tags are critical when styling Rich text in Webflow — check out our Rich text lesson on Webflow University and learn how tags can help you create consistent designs
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback