How to override H2 default CSS with custom CSS

uwescharrer24 · 2022-08-13T11:22:47.108Z

Hi,

I’m trying to load custom HTML via the HTML element and applying custom CSS to its included HTML tags. The strange thing is that it doesn’t work for everything.

For example, my custom CSS, which I’ve placed at the page level (“Page HTML Header”), works for blockquotes or background-color changes on p-tags, but it doesn’t work for h2-tag. Even when using custom ids or classes for my h2-headlines, they’ll never get applied by bubble.

test

Chrome dev tools:
For p-tags, the style is correct.

p-applied1834×164 26.6 KB

And for H2, nothing happens:

not-applied1831×111 11.4 KB

Any ideas or help on that?

Thanks,
Uwe

viquarahmed07 · 2022-08-13T11:39:17.479Z

Hi @uwescharrer24
To override any style you need to add “! important”
for example “backgorund-color: red !important”.

You can read more about over riding styles here

w3docs.com

How to Override CSS Styles

How CSS overriding works, what is the cascading order and inheritance, what are the priorities and some tricks to override them.

uwescharrer24 · 2022-08-13T12:18:35.465Z

Hi @viquarahmed07

Thanks for your quick response. I tried it with !important, but it doesn’t work either. Sorry, I forgot to mention that.

Here’s an example:
important

I also tried to give the H2 an own id and class, and it didn’t work.
Another attempt was to include a span-tag inside the H2 with its own class and make changes to that element. But again, no changes applied…

uwescharrer24 · 2022-08-13T12:22:06.067Z

Hi @viquarahmed07

As I posted my answer, I directly saw the solution. There’s an unnecessary bracket. Thanks for your help!

Best,
Uwe