Nozioni di base su CSS in Dash

Creare dashboard con Dash e Plotly

Alex Scriven

Data Scientist

Che cos'è il CSS?

Sta per 'Cascading Style Sheets'
Controlla aspetto e disposizione degli elementi della pagina

Possiamo controllare:
- Proprietà del testo (dimensione font, colore, stile)
- Dimensioni e forma degli elementi HTML
- Posizionamento degli oggetti

CSS sul web

La maggior parte dei siti ha file CSS;

Vengono caricati all'apertura della pagina
In questo corso: proprietà style al suo posto

$Uno screenshot della homepage di Google con gli strumenti di sviluppo di Chrome aperti, dove si vede un tag che collega a un foglio di stile. Il codice riporta "<link type=\"text/css\" rel=Stylesheet href=" e un link dopo href alla posizione del file CSS$

CSS sugli elementi HTML

Il CSS può essere usato anche su un elemento HTML

Usa la proprietà style di un tag
Accetta CSS come coppie chiave-valore
- Le istruzioni sono "property:value; property:value;"

Uno screenshot dell'HTML di una lezione del capitolo 1 che ha creato diversi div di varie dimensioni con colori di sfondo. Mostra l'uso della proprietà style in HTML.

Un po' di stile CSS

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

Un'immagine con un titolo nero "Welcome to the website!" e sotto, in rosso e più grande, "Enjoy your stay!"

Modificare CSS in tempo reale

Possiamo modificare del CSS su un sito live

Clic destro su un elemento > seleziona 'Ispeziona' > modifica un valore CSS
Nota: è solo locale (sparisce al refresh)

Una gif della home page di Google dove il logo viene cliccato col tasto destro e, nel menu, viene scelta l'opzione 'inspect'. Si aprono gli Strumenti per sviluppatori e la larghezza dell'immagine è impostata a 100 pixel, riducendone subito la dimensione.

CSS in Dash

Argomento style dei componenti Dash
- Accetta CSS come dizionario
Codice precedente in un componente Dash:

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

CSS per il colore

Con il CSS puoi impostare:

Colore di sfondo di un oggetto (background-color)
Colore del testo (color)

Entrambi accettano stringhe (es. 'red') o codici RGB (es. 'rgb(0,0,255)' è blu!)

Una tabella a due colonne: a sinistra celle colorate e a destra i relativi codici RGB. Ci sono celle viola, verde, rosa scuro e blu scuro con i rispettivi codici RGB accanto.

CSS per le dimensioni

Il CSS può impostare le dimensioni con le proprietà width e height

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

Dimensioni CSS in percentuale

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

50% della dimensione dell'elemento padre

Esercitiamoci!

Creare dashboard con Dash e Plotly