For more information on concepts covered in this lesson, you can check out:
Styling the Header
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.
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
style.css, and enter the code that you see next onscreen.
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
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.
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.
You can use the
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.
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.
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
Become a Member to join the conversation.