# Help to understand how CSS styling is applied in bokeh

**URL:** <https://discourse.bokeh.org/t/help-to-understand-how-css-styling-is-applied-in-bokeh/11056>\
**Category:** Community Support\
**Created:** [November 25, 2023, 7:13pm UTC](https://discourse.bokeh.org/t/help-to-understand-how-css-styling-is-applied-in-bokeh/11056 "2023-11-25T19:13:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alex\_Kolby](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/alex_kolby/32/6275_2.png) [@Alex\_Kolby](https://discourse.bokeh.org/u/Alex_Kolby)\
**Post date:** [November 25, 2023, 7:13pm UTC](https://discourse.bokeh.org/t/help-to-understand-how-css-styling-is-applied-in-bokeh/11056/1 "2023-11-25T19:13:04Z")

</div>

Hello,

I am currently trying to understand how CSS styling can be applied to a bokeh server. After reading the documentation it seems like objects can be assigned a css class through the css\_classes argument and then CSS code can be created in a GlobalInlineStyleSheet.

I have searched the forum here but cannot seem to find a simple example explaining how to apply it. I have included an example where i would like to change the styling of a button. When serving this file and inspecting elements i can see the CSS code provided. However it is not applied to the button.

Im on version 3.2.2

```auto
from bokeh.layouts import layout
from bokeh.plotting import curdoc
from bokeh.models import Button,GlobalInlineStyleSheet

style = GlobalInlineStyleSheet(css=""".custom_button_1 {
                               
background-color: lightblue;
font-weight: bold;
color:navy;
border-style:solid;
border-width: 10px;
border-color:navy;
                               
}""")

button = Button(label = 'hello', stylesheets = [style],css_classes = ['custom_button_1'])

main = layout(button)

curdoc().add_root(main)

```

---

<div class="post-metadata">

**Author:** ![mateusz](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/mateusz/32/762_2.png) [@mateusz](https://discourse.bokeh.org/u/mateusz)\
**Post date:** [November 29, 2023, 10:08pm UTC](https://discourse.bokeh.org/t/help-to-understand-how-css-styling-is-applied-in-bokeh/11056/2 "2023-11-29T22:08:49Z")

</div>

Since bokeh 3.0 it should look like this:

```python
from bokeh.layouts import layout
from bokeh.io import show
from bokeh.models import Button, InlineStyleSheet

style = InlineStyleSheet(css="""
:host(.custom_button_1) {
    background-color: lightblue;
    font-weight: bold;
    color:navy;
    border-style:solid;
    border-width: 10px;
    border-color:navy;
}
""")

button = Button(label = 'hello', stylesheets = [style], css_classes = ['custom_button_1'])

main = layout(button)
show(main)

```

When styling bokeh’s components, almost always you will want to use a local stylesheet (i.e. `InlineStyleSheet` or `ImportedStyleSheet`) and styling of the widget’s root element is done via `:host` pseudo selector. To apply styles only for a particular sub-subselector, like a CSS class selector in this example, use `:host(.class-name)` syntax.

---

<div class="post-metadata">

**Author:** ![system](https://discourse-uploads.bokeh.org/original/2X/1/14eb24f9e10e4e9b78e3f10f66c04ffa96446e5a.svg) [@system](https://discourse.bokeh.org/u/system)\
**Post date:** [February 27, 2024, 10:09pm UTC](https://discourse.bokeh.org/t/help-to-understand-how-css-styling-is-applied-in-bokeh/11056/3 "2024-02-27T22:09:45Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.