Webstudio
Log in

Join the Webstudio community

Updated 6 months ago

Reset default CSS and allow to style elements directly (h1, h2, p, ul, etc...)

At a glance

The community members discuss the need to reset default browser styling when creating a new Webstudio project. They suggest being able to select HTML elements directly and apply default styles to them, such as setting a default style for all h1, h2, and lists. Some community members recommend using tokens to achieve this, while others suggest manually adding a reset CSS stylesheet as a workaround until a global solution is available. The discussion also touches on the pros and cons of having default browser styles versus resetting everything to 0, with the general consensus being that defining a custom style guide is the best approach.

ZZmove
Hello,

When you create a new Webstudio project, it would be great to reset default browser styling applied to body, titles, paragraphs, lists etc...

In addition to that, it would be great to be able to select html elements directly and apply default styles to them, to set a default style to all h1, all h2, all lists etc...
O
Z
L
13 comments
OOleg Isonen
Currently we recommend doing this via tokens, while we acknowledge that this could be done globally and we have a plan for it.
ZZmove
Really nice. I created that topic because the other day, I lost 15 min trying to understand why this $%£m margin was here, and I discovered this was a remanation of an h2 margin. When you deal with visual builder, I think all default browser behaviors should be reset to avoid unexpected results like that
OOleg Isonen
We kept the default browser styles specifically as they are by default, to avoid havingour opinions on defaults imposed on you.

Without margins at all, when you throw multiple instances onto canvas, it will all be with 0 margins a bit cramped
OOleg Isonen
webflow decided to put a bunch of their own preferences for margins
OOleg Isonen
lots of people want 0 for all values
OOleg Isonen
some will then say this looks like shit, the default should at least not look terrible
OOleg Isonen
they key is using your own style guide and that's it, once all the things are defined, you already know what you need to do for each instance
OOleg Isonen
just reseting everything to 0 doesn't replace a style guide, you will still need to apply all sorts of styles and in that case you may as well decide how you want to change the default styles
ZZmove
Reset everything to 0 is better than letting browser add random style. But defining our own style guide that allow to define default you want is the best bet
OOleg Isonen
browser styles are not really random, they make sense as defaults if you throw instances on canvas to look not terrible out of the box
OOleg Isonen
you are just coming with an expectation that you will define your own styles and you don't care how it looks like in between, before you have them
LLuke AKA Shoot Your Bricks
@Zmove Until we're able to style elements directly, there's probably a way to add a reset css stylesheet manually with code.
ZZmove
@Luke Monroe Nice idea, not ideal but can fix the issue
Add a reply
Sign up and join the conversation on Discord