CSS-grunder i Dash

Bygg dashboards med Dash och Plotly

Alex Scriven

Data Scientist

Vad är CSS?

Står för 'Cascading Style Sheets'
Styr hur webbsidans element ser ut och placeras

Vi kan styra:
- Textegenskaper (teckenstorlek, färg och stil)
- Storlek och form på HTML-element
- Placering av objekt

CSS på webben

De flesta webbplatser använder CSS-filer;

De läses in vid sidladdning
I den här kursen: egenskapen style istället

En skärmbild av Googles startsida med Chrome Developer Tools öppna, där det syns en tagg som länkar till en stilmall. Koden visar "<link type="text/css" rel=Stylesheet href=" och en länk efter href till CSS-filens plats

CSS på HTML-element

CSS kan även användas på ett HTML-element

Använd egenskapen style på en tagg
Tar emot CSS som nyckel-värde-par
- Satser skrivs som "property:value; property:value;"

En skärmbild av HTML-koden från en lektion i kapitel 1 som skapade flera div-element i olika storlekar med bakgrundsfärger. Den visar hur style-egenskapen används på HTML-element.

CSS-stilsättning i praktiken

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

En bild med en svart rubrik "Welcome to the website!" och nedanför, i rött och större text, "Enjoy your stay!"

Redigera CSS live

Vi kan redigera CSS direkt på en live-webbplats

Högerklicka på ett element > välj 'Inspect' > redigera ett CSS-värde
Obs – endast en lokal ändring (försvinner vid omladdning)

En gif av Googles startsida där logotypen högerklickas och alternativet 'Inspect' väljs i menyn. Detta öppnar Google Developer Tools längst ned. Där sätts bildens bredd till 100 pixlar, vilket gör att bilden krymper direkt.

CSS i Dash

Dash-komponenters argument style
- Tar emot CSS som en ordbok
Tidigare kod i en Dash-komponent:

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

CSS för färg

CSS kan användas för att ange:

Bakgrundsfärg på ett objekt (background-color)
Textfärg (color)

Båda metoderna tar emot strängar (t.ex. 'red') eller RGB-koder (t.ex. är 'rgb(0,0,255)' blått!)

En tabell med två kolumner där den vänstra är ifylld med färger och den högra visar tillhörande RGB-koder. Det finns en lila, grön, mörkrosa och mörkblå cell med sina RGB-koder i intilliggande celler.

CSS för storlek

CSS kan ange storlek via egenskaperna width och height

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

CSS-storlek i procent

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

50 % av föräldraelementets storlek

Nu kör vi en övning!

Bygg dashboards med Dash och Plotly