How to Override Default Styles for Base Elements

Design help General
1

We are using webflow to
create responsive HTML pages, which are than being inserted to various web
sites.

We don’t want styles override the targeted sites CSS. That is why we want to be
able to name all css Styles names we created start with “Pimexin-….”
like below.

However we cannot rename default styles for following Styles: Body, H1, H2, …,
H6, P

Is there any way to do that?

2

You can postfix them (body.mybody, h1.myh1 etc) and make sure the target site’s CSS is loaded after webflow’s one.

1 Like
3

How to postfix body h1 etc… Webflow designer do not allow me to rewrite them.

4

Select the body and add a classname, select hn and add a classname… etc

5

Hi @pimexin, thanks for your post. If you are exporting your site, you can set the base element styles in the webflow.css file after export. If you are hosting the site in Webflow, you can override the styles for the base elements by adding some CSS in the header of your site, doing something like:

<style>
body {
    background-color: #b0c4de;
}
h1 {
    color:black;
    text-decoration: none;
}
</style>

etc etc

Add these overrides to your Header in the Custom Code section : Custom code in head and body tags | Webflow University

I hope this helps. Cheers, Dave