Challenges in Applying CSS Styles

[outtssiderr]

How do I import CSS styles so that they apply to all elements on the page?

I created an open direct link to a CSS file using GitHub and Google Drive and inserted it first into the “page HTML header” - it didn’t work, my HTML elements didn’t follow the style. Then I tried inserting the CSS direct link into the settings → metatags in the header - it didn’t work either.

Then I tried JS injection code, but nothing came out of it.

I could create an HTML reusable element that would hold this huge CSS style code, but considering that I have many HTML elements, I think this could affect the overall performance of the website, loading times, and so on.

What is the solution?

[Newed]

Why do you “have many HTML elements”? Are you not using the Bubble’s native elements for some specific reason?

[outtssiderr]

I have some design elements that I’m not sure how to create with Bubble

[GH5T]

Create a reusable element. Inside that element add an HTML block. Inside that html block add:

<link rel="link-to-your-css-file" type="text/css" />

Now add that element to each one of your pages.

The other and most simple way is just put this in your apps header. Which you can do if your SEO/ Metadata tab on the editor.

You can also inject custom CSS with any toolkit plugin really. Just have it load on page load.

[outtssiderr]

Understood, thank you for the reply!