Notions de base sur le CSS dans Dash

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

Qu'est-ce que le CSS ?

Abréviation de « Cascading Style Sheets »
Contrôle l'apparence et la disposition des éléments d'une page web

On peut contrôler :
- Propriétés du texte (taille, couleur, style)
- Taille et forme des éléments HTML
- Placement des objets

Le CSS sur le web

La plupart des sites ont des fichiers CSS ;

Ils sont chargés au chargement de la page
Dans ce cours : on utilise plutôt la propriété style

Une capture d'écran de la page d'accueil de Google avec les outils de développement Chrome ouverts, montrant une balise qui lie une feuille de style. Le code indique "<link type="text/css" rel=Stylesheet href=" et un lien après href vers l'emplacement du fichier CSS

CSS sur les éléments HTML

Le CSS peut aussi s'appliquer sur un élément HTML

Utilisez la propriété style d'une balise
Accepte du CSS en paires clé‑valeur
- Les déclarations sont "property:value; property:value;"

Une capture du HTML d'une leçon du chapitre 1 qui crée plusieurs div de tailles différentes avec des couleurs d'arrière-plan. Elle montre l'usage de la propriété style en HTML.

Un peu de style CSS

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

Une image avec un titre noir « Welcome to the website! » et en dessous, en rouge et plus grand, « Enjoy your stay! »

Modifier du CSS en direct

On peut modifier du CSS sur un site en direct

Clic droit sur un élément > « Inspecter » > modifier une valeur CSS
Remarque : changement local seulement (disparaît au rafraîchissement)

Un GIF de la page d'accueil Google : le logo est cliqué avec le bouton droit puis « inspecter ». Les outils développeur s'ouvrent et la largeur de l'image est mise à 100 pixels, réduisant aussitôt sa taille.

CSS dans Dash

Argument style des composants Dash
- Accepte du CSS sous forme de dictionnaire
Code précédent dans un composant Dash :

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

CSS pour la couleur

Le CSS peut définir :

La couleur d'arrière‑plan d'un objet (background-color)
La couleur du texte (color)

Les deux acceptent des chaînes (ex. : 'red') ou des codes RGB (ex. : 'rgb(0,0,255)' correspond au bleu)

Un tableau à deux colonnes : à gauche des couleurs, à droite les codes RGB associés. On voit une case violette, verte, rose foncé et bleu foncé avec leurs codes RGB adjacents.

CSS pour la taille

Le CSS peut fixer la taille via les propriétés width et height

app.layout = [
  # Ajouter et redimensionner le logo de l'entreprise
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]

Taille CSS en pourcentage

app.layout = [
  # Ajouter et redimensionner le logo de l'entreprise
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]

50 % de la taille de l'élément parent

Passons à la pratique !