Basic resources on CSS & html to styling

Dash Python
1

Have you ever fancied placing a Dash button on the far left? Or how about those times when you need a green title?

This post aims to help you through.

Remember that any Dash html Component (DHC) can be customized by modifying their style properties.

Here you have an example:

html.Div([
    html.H1(children='Monthly Summary', style={'textAlign': 'center', 'color': '#007F94', 'fontWeight': 'bold'})
])

Wait… What does that mean? The Div contains a heading (H1) which has two properties: children and style. Notice that the title is a string assigned to the `children’ property. And the style property takes a dictionary type. The keys of the dictionary are the CSS styling properties, and the values are the styling features.

For example, in our minimal app the title will align to the center in #007F94 (aqua) color and have bold script.

Most DHC follow ‘CSS styling’ guides, hence, a quick way to customize DHC is to look on the web for CSS styling, and intuitively translate such guides into properties for the Dash style dictionary.

Quick guide:

  1. Check out this CSS tutorial for a basic overview of CSS
  2. The sidebar on the left part of the page has many CSS properties. Click the one that best fits your styling needs of the app. For example, if you want to add color to certain parts of our app, you can click on the color tab in the sidebar. Then, you can choose the styling properties, based on the color features you want.
  3. Note that whenever you see the CSS styling property hyphenated, you should convert it to a camelCase type when inserting it into the style property of your app. For example, to change the background color of an HTML heading, we take the example in the webpage and convert it to a camelCase type within Dash, as such:

From this:
<h1 style="background-color:#ff6347;">

To this:
html.H1(children='Monthly Summary', style={'backgroundColor': '#ff6347'})

*I recommend you use hexadecimal color types because there is more information on the web for that color type.

Don’t forget to share your CSS knowledge with the community because certainly there’s not enough about this topic.

Additional resources:

3 Likes