Conceptos básicos de CSS en Dash

Creación de paneles con Dash y Plotly

Alex Scriven

Data Scientist

¿Qué es CSS?

Significa 'Cascading Style Sheets'
Controla el aspecto y la disposición de elementos web

Podemos controlar:
- Propiedades de texto (tamaño, color, estilo)
- Tamaño y forma de elementos HTML
- Colocación de objetos

CSS en la web

La mayoría de webs tienen archivos CSS;

Se leen al cargar la página
En este curso: usamos la propiedad style

Una captura de la página de inicio de Google con las herramientas de desarrollador de Chrome abiertas, donde se ve una etiqueta que enlaza a una hoja de estilos. El código muestra "<link type="text/css" rel=Stylesheet href=" y un enlace tras href a la ubicación del archivo CSS

CSS en elementos HTML

CSS también puede usarse en un elemento HTML

Usa la propiedad style de la etiqueta
Acepta CSS como pares clave-valor
- Las sentencias son "property:value; property:value;"

Una captura del HTML de una lección del capítulo 1 que creó varios divs de distintos tamaños con colores de fondo. Muestra el uso de la propiedad style en HTML.

Algo de estilo CSS

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

Una imagen con un título negro "Welcome to the website!" y debajo, en rojo y más grande, "Enjoy your stay!"

Editar CSS en vivo

Podemos editar CSS en un sitio en vivo

Clic derecho en un elemento > 'Inspeccionar' > edita un valor CSS
Nota: cambio local (se pierde al recargar)

Un gif de la página de inicio de Google donde se hace clic derecho en el logotipo y en el menú se elige 'inspeccionar'. Se abren las Herramientas de desarrollador de Google abajo. Ahí se establece el estilo width de la imagen a 100 píxeles, reduciendo su tamaño al instante.

CSS en Dash

Argumento style de componentes Dash
- Acepta CSS como diccionario
Código anterior en un componente Dash:

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

CSS para color

CSS puede definir:

Color de fondo de un objeto (background-color)
Color del texto (color)

Ambos aceptan strings (p. ej., 'red') o códigos RGB (p. ej., 'rgb(0,0,255)' es azul)

Una tabla con dos columnas: la izquierda con colores y la derecha con sus códigos RGB. Hay celdas morada, verde, rosa oscuro y azul oscuro con sus códigos RGB al lado.

CSS para tamaño

CSS puede definir el tamaño con width y height

app.layout = [
  # Añadir y redimensionar el logotipo
  html.Img(src=logo_link,
  style={'width':'250px', 'height':'250px'})
]

Tamaño en porcentaje con CSS

app.layout = [
  # Añadir y redimensionar el logotipo
  html.Img(src=logo_link,
  style={'width':'50%', 'height':'50%'})
]

50% del tamaño del elemento padre

¡Vamos a practicar!

Creación de paneles con Dash y Plotly