CSS Basics in Dash

Building Dashboards with Dash and Plotly

Alex Scriven

Data Scientist

What is CSS?

CSS stands for 'Cascading Style Sheets'

A language to determine how a webpage is styled
We can control:
- Text/font properties
- Size & shape of objects (HTML tags!)
- Placement of objects

CSS on the web

Most websites have CSS files;

They are read in on page load
One way to apply CSS to page elements
Try opening up developer tools on Chrome to see (Google below!)
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 a HTML element

Use the style property of a tag
CSS statements in one big string separated by ;
- 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>

We can see the styling on our second title:

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 see how to edit some CSS on a live website

Right click an element > select 'inspect' > edit a CSS property
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 down 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.Div([
  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!)

Some color RGB codes:

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 = html.Div([
  # Add & resize the company logo
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
])

CSS size as a percentage

app.layout = html.Div([
  # 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