- All HTML Tags (All tags)
- All HTML Tags (All tags) are Webflow selectors that set shared base values for every element of the same type — equivalent to element-level CSS — and can be overridden by normal classes (blue tags).
Hi, I'm Masato, a Webflow specialist. This article covers the fundamentals of working in Webflow — specifically:
- Webflow basics 1: Where the HTML lives
- Webflow basics 2: Where the CSS lives
- Webflow basics 3: The All tags
- Webflow basics 4: What the colors in the CSS panel mean
Plenty of people use Webflow without knowing about All tags or what the CSS panel colors mean — so let's fix that here.
I regularly coach and advise Webflow learners, and the most common questions I get — "my link color won't change," "I don't know what to edit" — are all answered in this article. If any of this sounds unfamiliar, read on.
I also recorded a video for this (my first attempts at YouTube, so please forgive the rough production).
Why knowing element names matters
Webflow's UI uses the exact same names as real HTML, CSS, and JavaScript. Div block, heading, margin, padding — if you've ever studied HTML/CSS basics, these are familiar words.
Many other elements keep their real code names too. That makes exported code predictable, and it's friendly to experienced web developers.
So why does knowing the element names matter? Because it makes you able to Google things yourself.
Say you're building a site in Webflow and hit "what's the difference between margin and padding?" You'd ask a Webflow expert — but you don't know one. You'd check the official docs — but get lost. That's how people give up.
People often tell me they don't understand "blending" or "position:sticky". But these are all searchable: "CSS blending", "CSS position sticky" — you'll find exactly how they behave.
Once you understand how the HTML/CSS actually works, you can apply it in Webflow. So whenever you're stuck in Webflow, Google the element's name as-is. Most basic HTML/CSS behavior you can resolve on your own this way.
Where the HTML lives, where the CSS lives
Where the HTML lives
From here on, this is Webflow-specific UI knowledge you'll only find in the official docs. First, let's establish what's HTML and what's CSS.
Click Add Elements ("+") at the top left. The HTML elements appear.
This is essentially your HTML. Elements like "V Flex" and "H Flex", added in early 2024, are Webflow originals — a quick search brings up plenty of Webflow articles to confirm.
Honestly, I rarely use those. It's a matter of taste, but I personally prefer a plain Div block with no initial styles.
For other elements, look them up as needed — most are intuitive. In fact, I only studied HTML/CSS lightly at first, enough to build one simple site. Everything else came from intuition and Googling, so you can absolutely self-teach for free the same way.
Where the CSS lives
Next, the CSS. This one's easy: almost everything on the right side of the screen is CSS.
CSS names are nearly verbatim too, so any "what is this?" moment is one search away. These days GPT answers them as well — like this:
Surprisingly solid answers. Almost no explanation needed anymore.
The All tags
"All tags" — I call them the pink tags; officially they're "All HTML Tags". Think of them as setting base values for each element type, just like element-level CSS.
To find an All tag: select, say, an H1 element, then click the empty "Style Selector" field at the top of the CSS panel.
All tags affect every element of the same type, but they sit at the bottom of the priority stack. (In code terms they come first — and later code overrides earlier code.)
So pink-tag values can be overridden by blue tags. A blue tag is equivalent to a normal CSS class.
For example, to change the font site-wide, select the All tag "body" and set the font there. If you set it on a normal class (blue tag) called Body instead, it won't carry over to new pages — you'd be re-applying it endlessly.
That's the difference between All tags and blue tags. Now, the question I get most often:
Q: My link color won't change.
A: Set it on the All Links tag.
For some reason, Webflow ships the Link tag with no default color — yet inserted links start out blue. Perhaps the logic is that it's built into HTML rather than CSS, but then what about the other elements?
H1, H2 and friends have modified default sizes that show up in the CSS panel. Links alone don't reflect their color — which makes it genuinely hard to find.
And unlike normal code, coloring a parent element doesn't cascade to links — you have to color the Link directly. Rather than doing that every time, use the All Links tag once to set color and remove underlines.
This is the #1 thing people get stuck on when they don't know about All tags.
What the CSS panel colors mean
In the image above, the font shows in blue; weight and size show in orange. Let's zoom in.
This image tells us:
- The H1 class has the font Droid Serif set directly
- Weight, Size, Height, etc. are inherited from other elements
Blue text (like "font") means the value is set directly on this class.
Click an orange value and Webflow shows you where it's inherited from. When working from templates, collapse everything as below to scan the values at a glance.
See the orange and blue dots next to Typography? They indicate values are set there. When editing a template, follow the blue dots to find where a value originates, then delete or change it.
Delete every unnecessary blue value. They cause effects in unexpected places — and since Webflow demands responsive design attention, a meaningless leftover value is often exactly what breaks the mobile layout.
Summary
Those are the fundamentals you absolutely should know:
Where the HTML lives, where the CSS lives, the All tags, and what the CSS panel colors mean.
Work in Webflow without these and your site turns into a tangle where you can't tell what to edit.
Start by putting base values into the All tags, then add as little CSS as possible on top. Your design stays consistent, and the site stays manageable and hard to break. Questions? Feel free to reach out via our contact form. See you around.
Frequently asked questions
What do I do when a link color won't change in Webflow?
Set it on the All Links tag. In Webflow, coloring a parent element doesn't cascade to links, so setting color and removing underlines on All Links is the reliable fix.
Where do I find the All tags in Webflow?
Select an element such as an H1, then click the empty Style Selector field at the top of the CSS panel. All tag values can be overridden by blue tags (normal classes).
How do I change the font across my whole Webflow site?
Select the All tag "body" and set the font there. If you use a normal class (blue tag) called Body instead, new pages won't inherit it and you'll keep re-applying it.
What do the blue and orange colors in Webflow's CSS panel mean?
Blue means the value is set directly on that class; orange means it's inherited from another element. Click an orange value to see where it comes from.
