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 200+ 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, planetnocode.com, that are exclusive to our members. So head over there, planetnocode.com.

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 layout, 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 repeating groups before Bubble 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 SEO and header. Oh, and you can actually see that I've already applied some custom CSS for something that I was Oh, there we go, text gradient checkout. In our previous video for how to add text gradients backgrounds to text, but anyway, I will just add it in here, remove the duplicate style tags, and then we should see that this still works. Yep, and we can check and notice that our important declaration is now taking Preston over default near black color that you can get in Bubble. So those are the two ways that you can add CSS to your Bubble app. You can either do it in the page header or you can do it in the header across all of your site. If you've got any good applications of custom CSS, please do leave a comment down below. We would love to hear them and just see what you're doing with custom CSS in your Bubble apps.