Hi
I have a Project attachment (custom-style.css). This is getting exported with the website but in front-end some style rules are not working as written in the css file.
If I add this CSS directly into the page settings it works.
Can you please support me with that?
Jerry
September 13, 2021, 4:23pm
2
Hi, @NoCodeDev .
Without knowing any details you might have given the answer to your own question.
Hi
That’s true @Jerry , but there is no way to have a custom CSS file that overwrites the standard CSS rules?
Now it’s just inline CSS into the page wrapped around a <style>
tag.
My idea was to create a CSS file that I can attach to the whole project and that overwrites the standard CSS rules …
This usually works fine.
What errors do you get on the page? Have you checked the header of the HTML to make sure it’s referencing you CSS file correctly.
Yep. It loads the custom-style.css correctly in the header and no errors in console.
Just some rules that are declared in this custom-style.css file are like ignored. Instead, if applied in the page using inline css they work.
Some properties will require !important
Inline CSS always will win. (unless you mean inline is adding it to the page header?)
With inline I mean adding to page settings in this way. This will be added to the page header, right?
For the moment is ok but I would not load the css directly in the page to keep the code clean.
FYI.
Inline CSS is in the HTML to style an element like this…
<h1 style="font-size: 2rem; color: #000;">Hello World</h1>
Inline CSS will override any other CSS.
Internal CSS is on the page inside style tags. Usually for a page. But Blocs allows us to also add these on all pages.
External CSS is a linked CSS file.
Exactly, this i what I would like to achieve. Instead for a page, I would like those rules to apply website-wide
Code Editor
Also you can get to this by clicking this icon here
Now, this is a game changer!
Many thanks! @PeteSharp
Code Editor is also available here