Style labels in the Designer
In the Style panel of Webflow, property names appear in different colors: amber, blue, and pink. Amber indicates that the property's value is inherited from a combo class or another breakpoint, while blue shows that a change has been made at the current breakpoint. Pink means the grid child has specific sizing and layout properties.
To clear or reset styles for blue and pink properties, you can click the label or hold down Option/Alt and click. For amber properties, clicking the label reveals where that style is being inherited from.
Video transcript
Amber. Blue. Pink? In this Micro Lesson (which you know is micro because I’m scaled down considerably inside this video), we’ll talk about all three of these, including what they mean, and how to clear them.
So for all my CSS properties in the Style Panel, I can basically control everything. And when I’m just getting started, I can see plain labels, but I can also see some of them are amber without me doing anything.
Amber means it’s inheriting a value here. And I can just click the label and see where it’s coming from.
But the moment I change it? Boom. It’s blue. Blue means I’ve made a change to this style property on this breakpoint. So if I go to Tablet, I can see the same property is now amber. (And we know why! It’s because it’s now inheriting that style from the change I just made on desktop.) And if I change the value again here on tablet? Now it’s blue here, too. Remove it by going in and resetting? Now it’s back to amber (and we can see it’s inheriting from Desktop again).
(By the way, you can always hold down Option or Alt on your keyboard and click a label to reset the property instead of clicking in).
So. Plain means it’s not a changed value. Amber means it’s inheriting a style from somewhere else. And blue means I’ve actively changed a style on the current breakpoint.
What about pink? Well CSS grid is special. And there are times where I’m using a bunch of items that have the same class. But what if I want one of those items to span multiple grid cells? Well, when I make that change. Boom. Pink label. Pink means it’s affecting the currently selected grid child (something that’s a child of a grid), but not the whole class — meaning I can change these things one-by-one.
So. Plain label means the property’s not really set. Amber means it’s inheriting a value from somewhere else. Blue means I’ve made a change to styling on this breakpoint. And pink means it’s just affecting the currently-selected element; not the class itself.
So. Not the shortest lesson on Webflow University. But perhaps the smallest.
