CSS doesn't apply when I insert it into the page HTML header

[outtssiderr]

Why doesn’t my CSS code apply when I insert it into the page HTML header or in the ‘script/meta tags in header’ settings? It only actually works with an HTML element on the page.

Here’s a simple example:

I added a ‘box’ class to a Bubble element using the Classify plugin, then I inserted the CSS code into an HTML element on the page and it worked. BUT, when I inserted this code into the page HTML header and removed the HTML element, my style did not apply to the element with the ‘box’ class. Please tell me why it is so.

Thanks!

[ihsanzainal84]

I don’t know why it doesn’t work, i just know it doesn’t. What’s wrong with having it in a HTML element?

[dorilama]

probably it’s a problem of name clashing, some other code declares a class box and it’s executed after the html head but before the code in the html element so it can override your declaration depending on where you put it.

I suggest using a more specific name, ideally with a prefix to scope your classes.

[outtssiderr]

Thanks for the advice! I used the name “box” as a simple example. I do use specific names with a prefix, but unfortunately, the result doesn’t change.

[outtssiderr]

I need to apply css style to many pages. Sure I can create an HTML element for each page, but I think it would be better to insert a snippet in the meta tags settings. This way, the pages won’t have to load the same css every time.

[ihsanzainal84]

Alternatively, just put it in a reusable element

[flusk]

Hey @outtssiderr

The page HTML header and script/meta tags in header is only available in the paid plans as noted here: Page Element | Bubble Docs

I have tested that the same settings as you showed in your post and it works in a trial version of a bubble app (with classify plugin and everything).

Of course, you also rightfully identified that some of the CSS attributes must be prioritized with !important.

I hope this helps.

@Huseyin from Flusk | Discover the #1 Security and Monitoring Tool for Bubble

[outtssiderr]

Thanks for the response buddy. You’re 100% right… how awkward it turned out hehe

[flusk]

See this plugin if you want to test things in free as well:

[New Plugin] Html Header

My first plugin. This is a really no-code plugin (i.e. I didn’t write any code for it ). It doesn’t provide any elements or actions. All the plugin does is to add the content you set in the plugin settings to the html header of your app (overall app). Plugin page: HTML Header Plugin | Bubble Demo page: Bubble | No-code apps Demo page editor: HTML Header Demo | Bubble Editor As a demo, I added a style to an element which I set an ID. Here is the element with an ID: [image] …

@Huseyin from Flusk | Discover the #1 Security and Monitoring Tool for Bubble

[outtssiderr]

Thank you, it works!