CSS Basics in Dash

Building Dashboards with Dash and Plotly

Alex Scriven

Data Scientist

What is CSS?

Stands for 'Cascading Style Sheets'
Controls how web page elements look and are arranged

We can control:
- Text properties (font size, color, and style)
- Size & shape of HTML elements
- Placement of objects

CSS on the web

Most websites have CSS files;

They are read in on page load
This course: style property instead

A screenshot of Google's homepage with the chrome developer tools open where it can be seen that there is a tag that links to a stylesheet. The code notes "<link type="text/css" rel=Stylesheet href=" and a link after the href to the CSS file location

CSS on HTML elements

CSS can also be used on an HTML element

Use the style property of a tag
Accepts CSS written as key-value pairs
- Statements are "property:value; property:value;"

A screenshot of the HTML from a lesson in chapter 1 that created several divs of different sizes with background colors. It demonstrates the use of a style property on HTML.

Some CSS styling

<h1>Welcome to the website!</h1>
<h2 style="font-size:50px;color:red">
      Enjoy your stay!
</h2>

An image of a black title "Welcome to the website!" and below this, in red, in bigger writing "Enjoy your stay!"

Editing live CSS

We can edit some CSS on a live website

Right click an element > select 'Inspect' > edit a CSS value
Note - only a local change (gone on refresh)

A gif of Google's home page where the logo is right-clicked and in the dropdown, the option 'inspect' is selected. This opens the Google Developer Tools at the bottom. In this, the width style of the image is set to 100 pixels, which causes the image to reduce in size instantly.

CSS in Dash

Dash components style argument
- Accepts CSS as a dictionary
Previous code in a Dash component:

app.layout = [
  html.H1('Welcome to the website!'), 
  html.H2('Text',
  style={'font-size':'50px',
          'color':'red'})
]

CSS for color

CSS can be used to set the:

Background color of an object (background-color)
Text color (color)

Both methods accept strings (e.g., 'red') or RGB codes (e.g., 'rgb(0,0,255)' is blue!)

A table of two columns where the left is filled in with colors, and the right is the associated RGB codes. There is a purple, green, dark-pink, and dark-blue cell with their associated RGB codes in the adjacent cell.

CSS for Size

CSS can set the size via the width and height properties

app.layout = [
  # Add & resize the company logo
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]

CSS size as a percentage

app.layout = [
  # Add & resize the company logo
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]

50% of parent element size

Let's practice!

Building Dashboards with Dash and Plotly