Style Your Dash Application
In this section, you’ll learn how to apply custom styles to components, and then you’ll style the dashboard you built in the previous section. You can style components in two ways: using the
style argument of individual components or providing an external CSS file.
style argument to customize your dashboard is straightforward. This argument takes a Python dictionary with key-value pairs consisting of the names of CSS properties and the values you want to set.
When specifying CSS properties in the
style argument, you should use mixedCase syntax instead of hyphen-separated words. For example, to change the background color of an element, you should use
background-color—as seen onscreen.
If you wanted to change the style and color of the
<h1> element in
app.py, then you could set the element’s
style argument as seen onscreen. Here,
style is provided a dictionary with the properties and the values you want to set for them. In this case, the specified style is to have a red heading with a font size of 48 pixels.
The downside of using the
style argument is that it doesn’t scale well as your code base grows. If your dashboard has multiple components that you want to look the same, then you’ll end up repeating a lot of your code.
assets/ in the root directory of your project and save the files you want to add there. By default, Dash automatically serves any file included in
You can then use the
id arguments of the components to adjust their styles using CSS. These arguments correspond with the
id attributes when they’re transformed into HTML tags.
Become a Member to join the conversation.