From the course: Interactive Dashboards with Plotly and Dash

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

Styling interactive elements

Styling interactive elements

From the course: Interactive Dashboards with Plotly and Dash

Start my 1-month free trial Buy for my team

Styling interactive elements

“

- [Instructor] All right, so let's take a look at styling DCC components. As we saw in the last lesson, DCC components don't inherit the parent Div Styles the same way that traditional HTML elements do. We can apply some stylistic touches to them using our style arguments, but it's worth pointing out that some portions of DCC components can really only be modified if we change the underlying CSS code. And so in a few lessons, I'm going to show us a way to shortcut learning CSS and make some really pretty apps using some pre-built themes. That said, let's go ahead and take a look at styling these components. So here I've defined a style dictionary, My Dash App Style, color light gray, background color black font, family Arial. We're applying this to our parent Div. And then if we take a look at our dropdown, I'm now applying another style. Our color's going to be light gray, and our background color's going to be black. And when we run this cell, we end up with this app. And so the…

Contents