Noções básicas de CSS no Dash

Construindo Dashboards com Dash e Plotly

Alex Scriven

Data Scientist

O que é CSS?

Significa "Cascading Style Sheets"
Controla a aparência e o arranjo dos elementos da página

Podemos controlar:
- Propriedades de texto (tamanho da fonte, cor e estilo)
- Tamanho e formato de elementos HTML
- Posicionamento de objetos

CSS na web

A maioria dos sites tem arquivos CSS;

São carregados ao abrir a página
Neste curso: usar a propriedade style

Uma captura da página inicial do Google com as ferramentas do desenvolvedor abertas, mostrando uma tag que linka para uma stylesheet. O código indica "<link type="text/css" rel=Stylesheet href=" e um link após href para o arquivo CSS

CSS em elementos HTML

CSS também pode ser usado em um elemento HTML

Use a propriedade style da tag
Aceita CSS como pares chave-valor
- Declarações no formato "property:value; property:value;"

Uma captura do HTML de uma lição do capítulo 1 que criou várias divs de tamanhos diferentes com cores de fundo. Mostra o uso de style no HTML.

Um pouco de CSS

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

Uma imagem com o título em preto "Welcome to the website!" e abaixo, em vermelho e maior, "Enjoy your stay!"

Editando CSS ao vivo

Podemos editar CSS em um site ao vivo

Clique com o botão direito > "Inspect" > edite um valor CSS
Observação: mudança local (some ao atualizar)

Um GIF da página inicial do Google: o logo é clicado com o botão direito e, no menu, a opção 'inspect' é escolhida. Abre as DevTools do Google. O width da imagem é definido como 100 pixels, reduzindo o tamanho na hora.

CSS no Dash

Argumento style dos componentes Dash
- Aceita CSS como um dicionário
Código anterior em um componente Dash:

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

CSS para cores

CSS pode definir:

Cor de fundo de um objeto (background-color)
Cor do texto (color)

Ambos aceitam strings (ex.: 'red') ou códigos RGB (ex.: 'rgb(0,0,255)' é azul)

Uma tabela com duas colunas: à esquerda, cores preenchidas; à direita, os códigos RGB associados. Há células roxa, verde, rosa-escuro e azul-escuro com seus códigos ao lado.

CSS para tamanho

CSS define o tamanho com width e height

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

Tamanho em porcentagem no CSS

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

50% do tamanho do elemento pai

Vamos praticar!

Construindo Dashboards com Dash e Plotly