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 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 téléchargement de la page
Dans ce cours : propriété style à la place

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 vers l'emplacement du fichier CSS après href

CSS sur des éléments HTML

On peut aussi utiliser le CSS sur un élément HTML

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

Capture de l'HTML d'une leçon du chapitre 1 qui créait plusieurs div de tailles différentes avec des couleurs d'arrière-plan. Elle montre l'utilisation 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 en plus gros, « 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
Attention : changement local seulement (disparaît au rafraîchissement)

Un GIF de la page d'accueil de Google : le logo est cliqué droit, l'option « inspect » est choisie. Les outils de développement s'ouvrent. La largeur de l'image est mise à 100 pixels, réduisant instantanément sa taille.

CSS dans Dash

Argument style des composants Dash
- Accepte du CSS comme 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 (p. ex. « red ») ou des codes RVB (p. ex. 'rgb(0,0,255)' pour bleu)

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

CSS pour la taille

Le CSS peut définir 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 !