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
02:00 This will also work for adding a favicon or embedding images, as you’ll see a bit later on.
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.
02:21 In the next section of the course, you’ll see how this applies in practice, starting out by styling the header section of the dashboard.
Become a Member to join the conversation.