CSS-Grundlagen in Dash

Dashboards mit Dash und Plotly erstellen

Alex Scriven

Data Scientist

Was ist CSS?

Steht für „Cascading Style Sheets"
Bestimmt Aussehen und Anordnung von Webseitenelementen

Wir können steuern:
- Texteigenschaften (Schriftgröße, Farbe, Stil)
- Größe und Form von HTML-Elementen
- Platzierung von Objekten

CSS im Web

Die meisten Websites haben CSS-Dateien;

Sie werden beim Laden der Seite eingelesen
In diesem Kurs: statt dessen die Eigenschaft style

$Ein Screenshot von Googles Startseite mit geöffneten Chrome Developer Tools. Man sieht ein Tag, das auf ein Stylesheet verweist. Im Code steht „<link type=\"text/css\" rel=Stylesheet href=\"" und hinter href der Link zur CSS-Datei$

CSS auf HTML-Elementen

CSS kann auch direkt auf einem HTML-Element verwendet werden

Nutze die Eigenschaft style eines Tags
Akzeptiert CSS als Schlüssel-Wert-Paare
- Anweisungen sind "property:value; property:value;"

Ein Screenshot des HTML aus einer Lektion in Kapitel 1, die mehrere divs verschiedener Größe mit Hintergrundfarben erstellt. Er zeigt die Nutzung der style-Eigenschaft in HTML.

Etwas CSS-Styling

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

Ein Bild mit schwarzem Titel „Welcome to the website!" und darunter, in Rot und größer, „Enjoy your stay!"

Live-CSS bearbeiten

Wir können CSS auf einer Live-Website bearbeiten

Rechtsklick auf ein Element > „Inspect" wählen > einen CSS-Wert ändern
Hinweis: nur lokal (nach Neuladen weg)

Ein GIF der Google-Startseite: Auf das Logo wird rechtsgeklickt und im Dropdown „inspect" gewählt. Unten öffnen sich die Developer Tools. Dort wird die width des Bildes auf 100 Pixel gesetzt; das Bild verkleinert sich sofort.

CSS in Dash

style-Argument von Dash-Komponenten
- Akzeptiert CSS als Dictionary
Vorheriger Code in einer Dash-Komponente:

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

CSS für Farben

Mit CSS kannst du festlegen:

Hintergrundfarbe eines Objekts (background-color)
Textfarbe (color)

Beide akzeptieren Strings (z. B. 'red') oder RGB-Codes (z. B. 'rgb(0,0,255)' ist Blau!)

Eine Tabelle mit zwei Spalten: links Farbfelder, rechts die zugehörigen RGB-Codes. Es gibt eine lila, grüne, dunkelrosa und dunkelblaue Zelle mit ihren Codes in der Nachbarzelle.

CSS für Größe

CSS kann die Größe über die Eigenschaften width und height setzen

app.layout = [
  # Firmenlogo hinzufügen & skalieren
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]

CSS-Größe als Prozentwert

app.layout = [
  # Firmenlogo hinzufügen & skalieren
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]

50 % der Größe des Elternelements

Lass uns üben!

Dashboards mit Dash und Plotly erstellen