Join us and get access to thousands of tutorials and a community of expert Pythonistas.
This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.
Styling the Header
For more information on concepts covered in this lesson, you can check out:
00:00 Styling the header. In the previous section, you covered just the basics of styling in Dash. Now you’ll learn how to customize your dashboard’s looks. You’ll make these improvements: add a favicon and title to the page, change the font family of your dashboard, and use an external CSS file to style Dash components.
00:25
You’ll start by learning how to use external assets/ in your application. Then you’ll learn how to use the className argument to apply custom styles to your Dash components.
00:36
Create a folder called assets/ in your project’s root directory, and place the favicon.ico file from the course resources into it.
00:46
This favicon is taken from the open-source project linked onscreen, so you can alter the icon for future projects easily if you want to do so. Finally, create a CSS file in assets/ called style.css, and enter the code that you see next onscreen.
02:00
The assets/ folder contains the styles you’ll apply to components in your application’s layout. By now, your project structure should look the same as what’s seen onscreen.
02:11
Once you start the server, Dash will automatically serve the files located in assets/, and the HTML page generated by Dash will contain links to all the CSS files that are present in the assets/ folder. You include two files in assets/: favicon.ico and style.css. For setting a default favicon, you don’t have to take any additional steps. To use the styles you defined in style.css, you’ll just use the className argument in Dash components, as the CSS files will already be linked to and loaded by your browser.
02:45
app.py requires a few changes. You’ll include an external style sheet, add a title to the dashboard, and style the components using the style.css file.
02:58 Onscreen, you can see the necessary changes to implement these improvements.
03:08
On lines 13 to 20, you specify an external CSS file, a font family that you want to load in your application. External files are added to the <head> tag of your application and loaded before the body of the application.
03:21
You can use the external_stylesheets argument for adding external CSS files or external scripts for external JavaScript files such as Google Analytics. On line 21, you set the title of the application.
03:35
This is the text that appears in the title bar of the web browser in Google search results and in social media cards when you share your site. To use the styles in style.css, you’ll need to use the className argument in Dash components.
03:51 The code you’ll see onscreen adds a class name with a corresponding class selector to each of the components that compose the header of the dashboard.
04:59
On lines 23 to 39, you can see that there have been two changes to the initial version of the dashboard. There’s a new paragraph element with an avocado emoji that will serve as a logo, and there’s a className argument in each component.
05:13
These class names should match a class selector in style.css, which will define the looks of each component. For example, the header description class assigned to the paragraph components starting with the "Analyze the behavior of avocado prices" has a corresponding selector in style.css.
05:34 With the first part of the dashboard styled, run the app using the code seen onscreen and see the difference that the changes make to the dashboard’s appearance.
05:46 Now that you’ve seen how to improve the looks of your dashboard, in the next video, you’ll see how to improve the appearance of the charts that are used in Dash.
Become a Member to join the conversation.