Styling DOM elements#
Bokeh has a few different mechanism for including CSS styles in output.
Styles#
The Styles
class can be used to configure
inline style attribute of DOM elements directly:
style = Styles(
display="grid",
grid_template_columns="auto auto",
column_gap="10px",
)
grid = Div(style=style)
Stylesheets#
It is also possible to define and inlude stylesheets in generated output. Bokeh provides a few different variations that can be used to apply CSS rules to DOM objects in Bokeh output:
-
Inline stylesheet equivalent to
<style type="text/css">${css}</style>
. -
Imported stylesheet equivalent to
<link rel="stylesheet" href="${url}">
. -
Analogous to
InlineStyleSheet
but appended to the<head>
element. -
Analogous to
ImportedStyleSheet
but appended to the<head>
element.
The global variants are appended to <head>
only once, so that the same
stylesheet model can be shared between various UI components efficiently.
For example:
from bokeh.models import InlineStyleSheet, Slider
stylesheet = InlineStyleSheet(css=".bk-slider-title { background-color: lightgray; }")
slider = Slider(value=10, start=0, end=100, step=0.5, stylesheets=[stylesheet])