CSS-basics in Dash

Dashboards bouwen met Dash en Plotly

Alex Scriven

Data Scientist

Wat is CSS?

Staat voor 'Cascading Style Sheets'
Bepaalt hoe elementen eruitzien en zijn gerangschikt

We kunnen regelen:
- Teksteigenschappen (lettergrootte, kleur, stijl)
- Grootte en vorm van HTML-elementen
- Plaatsing van objecten

CSS op het web

De meeste websites hebben CSS-bestanden;

Ze worden ingeladen bij het openen van de pagina
In deze cursus: in plaats daarvan de eigenschap style

Een screenshot van de Google-startpagina met de Chrome DevTools geopend, waar te zien is dat er een tag is die naar een stylesheet linkt. De code toont "<link type="text/css" rel=Stylesheet href=" en daarna een link naar de locatie van het CSS-bestand

CSS op HTML-elementen

CSS kan ook op een HTML-element worden gebruikt

Gebruik de eigenschap style van een tag
Accepteert CSS als key-valueparen
- Statements zijn "property:value; property:value;"

Een screenshot van de HTML uit een les in hoofdstuk 1 die meerdere divs van verschillende groottes met achtergrondkleuren maakte. Het toont het gebruik van een style-eigenschap op HTML.

Wat styling met CSS

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

Een afbeelding met de zwarte titel "Welcome to the website!" en daaronder, in rood en groter, "Enjoy your stay!"

Live CSS bewerken

We kunnen CSS live op een website bewerken

Klik met rechts op een element > kies 'Inspecteren' > wijzig een CSS-waarde
Let op: alleen lokaal (verdwijnt na verversen)

Een gif van de Google-startpagina waar op het logo met rechts wordt geklikt en in het dropdownmenu 'inspect' wordt gekozen. Dit opent de Google Developer Tools onderin. Daar wordt de width-stijl van de afbeelding op 100 pixels gezet, waardoor de afbeelding direct kleiner wordt.

CSS in Dash

Dash-componenten hebben het argument style
- Accepteert CSS als een dictionary
Vorige code in een Dash-component:

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

CSS voor kleur

Met CSS kun je instellen:

Achtergrondkleur van een object (background-color)
Tekstkleur (color)

Beide accepteren strings (bijv. 'red') of RGB-codes (bijv. 'rgb(0,0,255)' is blauw)

Een tabel met twee kolommen: links kleurvakken, rechts de bijbehorende RGB-codes. Er zijn paarse, groene, donkerroze en donkerblauwe cellen met hun RGB-codes ernaast.

CSS voor grootte

CSS kan de grootte instellen met width en height

app.layout = [
  # Voeg het bedrijfslogo toe en pas de grootte aan
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]

CSS-grootte als percentage

app.layout = [
  # Voeg het bedrijfslogo toe en pas de grootte aan
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]

50% van de grootte van het hoofd-/ouderelement

Laten we oefenen!

Dashboards bouwen met Dash en Plotly