Often times, external styles defined in a site’s CSS. The purpose of a stylesheet is to make sure that multiple contributors create in a uniform and cohesive way that reflects the style and ensures brand consistency. CSS can define things like font-family for H1 text or display how links should be decorated on a page. These stylesheets take precedence over styles added in Builder, so you may notice that as you try to style elements, your site’s CSS will override those changes in Builder. Feel free to reach out if you have questions!
Hi Kara,
I’m trying to set global styles for the fonts in order to get:
uniform and cohesive way that reflects the style and ensures brand consistency
But all my global styles get overridden by builder-blocks classes because of specificity. The text elements like headings and paragraphs have inherit styles but when I add a columns components, these columns have predefined styles that override our global styles. We just want our marketing team to create content with brand predefined styles by default.
I know you may suggest to use !important in our styles but you know this is not a good practice, why don’t just make your components fully un-styled by default? And only if we add custom style to a block this can override our global styling.
1 Like
Hi @luigiveoworld,
Can you share a link to a Builder page where you are seeing your global styles being overridden?
Was there any further movement on this issue? I am facing the same issue and feel that for custom components, the styling should be Opt-In.
Hi Brent9997
Were you able to discern which CSS specificity was overriding the desired styling?
If you’d like help styling a specific element, please reach out to support@builder.io and provide your Public API Key and a Technical Specialist can work with your specific case.
Thanks for asking @JuliusGD
My issue is that for custom components, the Style tab should be able to be toggled “off”. This will not be a specific case for me but a global issue whenever editors use a custom component and also use the Style tab. The specificity is the class that builder adds on the wrapper. I have added an additional div to get around this, but I wish I didn’t have to do that. There are style tags in my HTML that is not serving a purpose and can cause confusion as I have to override anything added by the Style tab controls. If I could, I would set up the space for components-only mode, but I am inheriting this months into the project.
Hello Brent,
Thank you for outlining your use case and feedback. I’ll be passing along to our Dev Team.