Style Your Dash Application

00:00 Styling your Dash application. Dash provides you with a lot of flexibility to customize the look of your application. You can use your own CSS or JavaScript files, set a favicon, and embed images, amongst other advanced options.

00:18 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.

00:36 Using the 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.

00:50 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 backgroundColor—and not background-color—as seen onscreen.

01:07 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.

01:28 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.

01:40 So instead, you can use a custom CSS file. If you want to include your own local CSS or JavaScript files, then you need to create a folder called 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 assets/.

02:00 This will also work for adding a favicon or embedding images, as you’ll see a bit later on.

02:07 You can then use the className or id arguments of the components to adjust their styles using CSS. These arguments correspond with the class and 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.