2.7 Intro a CSS

CSS, cuyas siglas hacen referencia a Cascading Style Sheets, es el lenguaje usado para diseñar la presentación visual de documentos escritos en algún lenguaje de texto plano, como HTML o XML, para, por ejemplo, crear paginas web estilizadas.

En nuestro caso, CSS es utilizado para diseñar el estilo de las diapositivas, por ejemplo, para modificar la fuente, el color, el tamaño y el espaciado de su contenido, dividirlo en varias columnas o agregar animaciones y otras características decorativas.

CSS es el lenguaje que le dice a los navegadores web (o al objeto donde se estén visualizando las diapositivas) cómo representar y estilizar las diferentes partes de la presentación.

2.7.1 Sintaxis

La sintaxis CSS incluye selectors, properties, values, declarations, declaration blocks y rulesets.

  • selectors: Es un fragmento de código que se utiliza para identificar el elemento o los elementos de la presentación que se verán modificados por los estilos.

  • properties: Es el aspecto del elemento que se va a modificar. Por ejemplo, el color, el relleno, el margen y el fondo son algunas de las propiedades CSS más utilizadas.

  • values: Un valor se usa para definir una propiedad. Por ejemplo, a la propiedad color se le puede asignar el valor de rojo de la siguiente manera: color: red ;.

  • declarations: La combinación de una propiedad y un valor se llama declaración.

  • declaration blocks: En muchos casos, se aplican varias declaraciones a un solo selector. Un bloque de declaración es el término utilizado para referirse a todas las declaraciones aplicadas a un solo selector.

  • rulesets: Un solo selector y el bloque de declaración que lo sigue en combinación se denominan conjunto de reglas.

2.7.2 Ejemplo

Utilicemos el siguiente bloque de CSS para ejemplificar cada elemento de la sintaxis.

h1 { 
  color: red; 
  font-size: 3em; 
  text-decoration: underline;
  }

En este caso h1 es el selector. El selector va seguido de un declaration block que incluye tres declarations. Cada declaración está separada de la siguiente por un punto y coma. Las pestañas y los saltos de línea son opcionales, pero la mayoría de los desarrolladores los utilizan para hacer que el código CSS sea más fácil de entender.

Al usar h1 como selector, estamos diciendo que cada encabezado de nivel 1 en la presentación debe seguir las declaraciones contenidas en este ruleset.

El ruleset contiene tres declaraciones:

  • color: red;

  • font-size: 3em;

  • text-decoration: underline;

color, font-size, y text-decoration son todas properties. Hay cientos de propiedades CSS que se pueden usar, sin embargo, solo unas cuantas se usan comúnmente.

Aplicamos los valores red, 3em y underline a las propiedades que usamos. Cada propiedad de CSS está definida para aceptar valores con un formato o de una manera en específico.

Para la propiedad de color, podemos usar una palabra clave de color o una fórmula de color en formato Hex, RGB o HSL. En este caso, usamos la palabra clave de color red. Hay algunas docenas de palabras clave de color disponibles en CSS, pero se puede acceder a millones de colores con los otros modelos de color.

Aplicamos el valor de 3em a la propiedad font-size. Existe una amplia gama de unidades de tamaño que podríamos haber utilizado, incluidos píxeles, porcentajes y más.

Finalmente, agregamos el valor underline (subrayado) a la propiedad text-decoration. También podríamos haber usado overline o line-through como valores para text-decoration.

Además, CSS3 permite el uso de los estilos de línea sólido (solid), doble (double), punteado (dotted), guiones (dash) y ondulado (wavy), así como la especificación de colores de decoración de texto. Podríamos haber aplicado los tres valores a la vez usando una declaración como esta:

text-decoration: blue double underline;

Esa regla haría que h1 en el ejemplo inicial se subrayara con una línea doble azul. El texto en sí permanecería rojo como se define en la propiedad de color.

Puede apuntar a varios selectores a la vez, separándolos con una coma. Si quiero que todos los párrafos y todos los elementos de las listas sean verdes, mi regla se vería así:

p, li {
    color: green;
}

Hasta ahora hemos diseñado elementos basados en sus nombres de HTML por defecto. Esto funciona siempre que desee que todos los elementos de ese tipo en su documento tengan el mismo aspecto. La mayoría de las veces ese no es el caso, por lo que deberá encontrar una manera de seleccionar un subconjunto de elementos sin cambiar los demás. La forma más común de hacer esto es agregar una clase de bloque de contenido a su documento Rmarkdown y en el archivo CSS definir las propiedades de visualización de los elementos escritos dentro de esa clase.

Por ejemplo, en su CSS, puede apuntar a la clase texto_especial creando un selector que comience con un carácter de punto final.

.texto_especial {
  color: orange;
  font-weight: bold;
}

Y luego puede asignar elementos a esta clase dentro de una diapositiva

--- 

# Título

Texto normal 

.texto_especial[texto con el diseño definido para la clase texto_especial en el archivo CSS]

Texto normal

---

Para conocer los selectors (elementos) y/o clases ya definidos en los diferentes temas de Xaringan (p.ej: h1, h2, h3, body, .title-slide, .remark-slide-content) y así realizar modificaciones sobre estos, puede explorar los archivos .css desde aquí y ver los diferentes rulesets que definen el diseño de cada tema.