# How can I add css to a page or my entire application?

**URL:** <https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226>\
**Category:** Questions\
**Created:** [October 2, 2020, 12:21am UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226 "2020-10-02T00:21:22Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![GB44](https://avatars.discourse-cdn.com/v4/letter/g/6bbea6/32.png) [@GB44](https://forum.bubble.io/u/GB44)\
**Post date:** [October 2, 2020, 12:21am UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/1 "2020-10-02T00:21:22Z")

</div>

How can I add css to a page or my entire application? E.g.

```
a {
   outline: 0;
}
```

---

<div class="post-metadata">

**Author:** ![J805](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/j805/32/41267_2.png) [@J805](https://forum.bubble.io/u/J805)\
**Post date:** [October 2, 2020, 4:38am UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/2 "2020-10-02T04:38:27Z")

</div>

Is this what you need help with? [What causes these ant lines?](http://forum.bubble.io/t/what-causes-these-ant-lines/87287)

I think I used this plugin: [https://bubble.io/plugin/css-tools-1504424270272x619283445634039800](https://bubble.io/plugin/css-tools-1504424270272x619283445634039800)

Hope that helps! 😊

@j805 [www.NoCodeMinute.com](http://www.nocodeminute.com/)

For All Your No-Code Education Needs:

- One-on-One Tutoring
- eLearning Hub
- Video Tutorials
- No-Code Classes

---

<div class="post-metadata">

**Author:** ![mangooly](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mangooly/32/40770_2.png) [@mangooly](https://forum.bubble.io/u/mangooly)\
**Post date:** [October 2, 2020, 7:00am UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/3 "2020-10-02T07:00:59Z")

</div>

Hi @GB44,

If you want to add CSS to the whole application, using your example, you can add it here,

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/b/2/b20ffc7accc7a1578270dda4efb84dd72141ba4f.png)

If you want to add CSS to a particular page, you have to open the settings popup (Click anywhere on a page) and include the CSS in the HTML header section,

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/2/0/20d6eabe8ac7c4dca46bda0bfa24098027816543.png)

PS. Remember: You might have to add ‘!important’ to ignore Bubble styling.

eg. a { outline: 0!important; }

---

<div class="post-metadata">

**Author:** ![GB44](https://avatars.discourse-cdn.com/v4/letter/g/6bbea6/32.png) [@GB44](https://forum.bubble.io/u/GB44)\
**Post date:** [October 2, 2020, 4:15pm UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/4 "2020-10-02T16:15:00Z")

</div>

> [@GB44](#):
>
> ```auto
> a {
> outline: 0;
> }
> 
> ```

The setting worked! Great info re that and the page-specific `<header>` tagging. Thanks!

---

<div class="post-metadata">

**Author:** ![GB44](https://avatars.discourse-cdn.com/v4/letter/g/6bbea6/32.png) [@GB44](https://forum.bubble.io/u/GB44)\
**Post date:** [October 2, 2020, 4:15pm UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/5 "2020-10-02T16:15:45Z")

</div>

Thanks! @mangooly’s answer was what I was hoping for - a solution with no plugin required.

---

<div class="post-metadata">

**Author:** ![GB44](https://avatars.discourse-cdn.com/v4/letter/g/6bbea6/32.png) [@GB44](https://forum.bubble.io/u/GB44)\
**Post date:** [October 2, 2020, 5:55pm UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/6 "2020-10-02T17:55:45Z")

</div>

@mangooly @Bubble - Weird - On mobile I see the css flash up at the top of screen before the app screen appears. That sound familiar? Def not good.

---

<div class="post-metadata">

**Author:** ![mangooly](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mangooly/32/40770_2.png) [@mangooly](https://forum.bubble.io/u/mangooly)\
**Post date:** [October 2, 2020, 6:39pm UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/7 "2020-10-02T18:39:47Z")

</div>

Hi @GB44,

Can you be more specific? Do you mean the CSS code? Thats most probably because there is an error in the CSS, some tag isn’t closed or property missing.

Can you share a video or something, not exactly sure what you mean.

---

<div class="post-metadata">

**Author:** ![GB44](https://avatars.discourse-cdn.com/v4/letter/g/6bbea6/32.png) [@GB44](https://forum.bubble.io/u/GB44)\
**Post date:** [October 3, 2020, 12:32am UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/8 "2020-10-03T00:32:37Z")

</div>

My bad. I forgot the tags.

---

<div class="post-metadata">

**Author:** ![GB44](https://avatars.discourse-cdn.com/v4/letter/g/6bbea6/32.png) [@GB44](https://forum.bubble.io/u/GB44)\
**Post date:** [October 7, 2020, 2:58am UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/9 "2020-10-07T02:58:39Z")

</div>

> [@GB44](#):
>
> `outline: 0;`

Hi @mangooly, I think it works on Chrome but not Safari?

![Screen Shot 2020-10-06 at 7.58.10 PM](https://us1.discourse-cdn.com/bubble/original/3X/8/7/871af4665e24f167bd7c0737efcc15b4a13f9d51.png)

 ![Screen Shot 2020-10-06 at 7.58.22 PM](https://us1.discourse-cdn.com/bubble/original/3X/7/f/7f30db96b063b0afca19cde0efd64e51524e7ed7.png)

I also tried:

```auto
a, a:active, a:focus {
   outline: none;
}

```

---

<div class="post-metadata">

**Author:** ![mangooly](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mangooly/32/40770_2.png) [@mangooly](https://forum.bubble.io/u/mangooly)\
**Post date:** [October 7, 2020, 8:51am UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/10 "2020-10-07T08:51:48Z")

</div>

Hi @GB44,

Welcome to the world of CSS. 🙂

You are using the \< SCRIPT \> tag when you should be using the \< STYLE \> tag for CSS.  
Hope that helps.

Regards

---

<div class="post-metadata">

**Author:** ![GB44](https://avatars.discourse-cdn.com/v4/letter/g/6bbea6/32.png) [@GB44](https://forum.bubble.io/u/GB44)\
**Post date:** [October 7, 2020, 11:57am UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/11 "2020-10-07T11:57:52Z")

</div>

That’s embarrassing. I knew that! Still not working. See below with view source showing the script tag in place. I even added !important. And I even tried seeing if I could change it to white with this red outline test. Is it possible it’s a different element that is getting the outline?

The outline appears to mirror my containing group for that icon and text. I have a left and right border for that group - and the dotted lines appear on top of those left and right borders.

Here’s the page url if that helps - [Your Marketing swipe list | SwipeListed](https://swipelisted.bubbleapps.io/version-test/)

 ![Screen Shot 2020-10-07 at 4.51.55 AM](https://us1.discourse-cdn.com/bubble/original/3X/d/1/d1c5a519d0d97bd215d907e3d2931b9bca8767ab.png)

 ![Screen Shot 2020-10-07 at 4.55.58 AM](https://us1.discourse-cdn.com/bubble/original/3X/0/5/0569bc246ef9d02170529657a4f5a7e5ef18b890.png)

---

<div class="post-metadata">

**Author:** ![mangooly](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mangooly/32/40770_2.png) [@mangooly](https://forum.bubble.io/u/mangooly)\
**Post date:** [October 16, 2020, 9:18pm UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/12 "2020-10-16T21:18:11Z")

</div>

Hi @GB44,

Just saw this now, didn’t get a notification. You need to identify the group container in the html and add the styling to that. I also recommend you add an id to that container so that you can apply the right styling to that particular group container.

Eg.

![image](https://us1.discourse-cdn.com/bubble/original/3X/9/8/984fc801af79fa2fa86b1a51a85180feb6a9cb3e.jpeg)

---

<div class="post-metadata">

**Author:** ![samnichols](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/samnichols/32/105510_2.png) [@samnichols](https://forum.bubble.io/u/samnichols)\
**Post date:** [October 1, 2021, 6:31am UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/13 "2021-10-01T06:31:17Z")

</div>

Just adding my little note: If you’re not yet on a paid plan, anything you apply to the or tags won’t apply. You _ **can** _, however, add an HTML element to the page itself and add your script/stylesheets to at least test if your styles are applying and your JS is working.

---

<div class="post-metadata">

**Author:** ![gary.homewood](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gary.homewood/32/200171_2.png) [@gary.homewood](https://forum.bubble.io/u/gary.homewood)\
**Post date:** [January 9, 2024, 2:32pm UTC](https://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/14 "2024-01-09T14:32:41Z")

</div>

@mangooly Continuing the discussion from [How can I add css to a page or my entire application?](http://forum.bubble.io/t/how-can-i-add-css-to-a-page-or-my-entire-application/114226/3):

I have successfully added CSS to my application by adding a style tag to the Settings \> Script/meta tags in header section as detailed above.

For more than a handful of rules, I imagine this will become difficult to maintain. Are there any performance considerations I should be aware of? How would I link a whole CSS stylesheet?
