Bubble is a fantastic no-code development platform. But sometimes you need a little code like CSS to perfect the design of your Bubble app. In this Bubble tutorial video we demonstrate 2 ways you can add custom CSS to your Bubble app.

Bubble is a fantastic no-code web app development tool, but sometimes you just can't get there without using a little bit of custom CSS. In this video I want to show you the two places that you can add custom CSS really easily to your Bubble app and I explain the difference between the two.

Discover [hfcm id="3"] Bubble tutorials

Now if you're learning Bubble and you want to continue and accelerate your Bubble development journey, we'd really appreciate a like and subscribe on this video and you can find videos on our website, pm68rf4jt3-staging.onrocket.site,

But let's add a little bit of custom CSS to our Bubble app. I'm going to demonstrate basically changing a bit of text. Now of course you can do that based on the inspector tool that's provided here. You can change all the elements that you want to about the text. But there are some reasons why you might want to add custom CSS. Maybe you want a custom grid
, maybe you've seen someone post a snippet online, just to get that perfect design that you're going for. So I'm going to hit preview and go about customizing this.

Browser developer tools

So I'm going to right-click, bring up the browser inspect tools, and at the moment there's no way for me to directly target. So I'm going to add in an ID attribute, and this is a way of basically injecting a name or a label into the code that makes up the web page. So I'll just say my text. An ID attribute ideally should be unique because an ID in CSS is used to target a unique element whereas the class is used to target more than one element. But I have found myself, especially with styling repeating groups using custom CSS, I will use the same ID across them because I want to apply the same style so it does sort of break the rules a bit. But yeah, we've got my text and so then if I go back to the preview here, we'll see that the ID has been added to the div which contains the text there.

Adding CSS to Bubble - 1 page

So if I go back into Bubble, here is one place that you can add custom CSS and that is on the page level. And you want to load CSS early in the page loading process because otherwise you'd get content shift or content shuffle things load in, they change their look as they load in it, poor user experience. So let's add something to the page up here. So we open up a style tag and in fact I'll immediately close the style tag and we want to target the ID that we just created. So to target an ID we use the hash sign and then I'm writing my ID, my text and I will... let's just go color and I'll try pink. You could of course put a hex color or even a semi-transparent color in here. Preview.

Okay and you'll notice that it hasn't worked. In fact we can look and see in the browser developer tools that we're kind of going against Bubble. Of course Bubble wants you to set the color in the topography section of the inspector but we're kind of brute forcing something across and you can see that actually in the hierarchy of CSS this is being ignored because color set here is taking precedent. Now this is how you go to the next level of brute forcing CSS. And again, this is not really a best practice, but sometimes you just need to put importance in there. And that's basically telling the browser that when it looks through all the CSS, all of the mentions about this element and what color it should be, it's saying actually pink is the most important attribute for the color and for the text.

So let's refresh that. And you see now it's changed to pink. But let's say, and again, changing the color topography, I don't see why there's any reason for you to have to do that using CSS, but I'm simply illustrating one way that you can apply CSS. Like I said, the way that I've done it before is to get a particular look like a masonry grid or
landed in that feature, that sort of thing. Oops, didn't mean to do that. So adding to the page header is one place to do it, but what if I wanted to very quickly, using the ID attribute, be able to apply some custom CSS across multiple similar elements across multiple pages?

Adding CSS to Bubble - All site

Well, at the moment my CSS is only being applied on this one page, so instead I would move it into settings and I'd go into