Help to understand how CSS styling is applied in bokeh

[Alex_Kolby]

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

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)

[mateusz]

Since bokeh 3.0 it should look like this:

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.