Las hojas de estilo en cascada (Cascading Style Sheets) es un lenguaje de marcado que permite estructurar y diseñar documentos HTML. Normalmente se especifica en archivos externos con extensión .css, sin embargo, en tecnologías como AMP esto no será posible debido a sus restricciones. En la actualidad, CSS está sustentado por el W3C (World Wide Web Consortium). De hecho, este órgano nos ofrece una herramienta de validación gratuita realmente útil jigsaw.w3.org/css-validator/. CSS es un lenguaje relativamente sencillo comparado con otros. Su sintaxis está compuesta por unas reglas que contienen selectores y bloques de declaración. Los selectores son utilizados para escoger una o varias etiquetas que cumplan determinadas características. Se aplican sobre elementos del DOM directamente (H1, div, span, etc.) o en base a alguno de sus atributos, como el ID o el Class.
- ID. Es el identificador asociado a un único elemento del DOM. Sólo debería aparecer una vez por página. Se detalla con el carácter #. Ejemplo: #midentificador o div#midentificador.
- Class. A distinción del anterior, puede darse entre cuantos elementos sea necesario. Cualquier acción vinculada afectará al conjunto de etiquetas agrupadas bajo el nombre de este atributo. Se define con un punto (.). Ejemplo: .miclase o p.miclase.
Son case sensitive (distingue entre mayúsculas y minúsculas), pueden incluir caracteres alfanuméricos o guiones bajos y siempre empiezan con una letra. Además, a los selectores se les pueden añadir pseudo-clases o pseudo-elementos. A grandes rasgos, estos detallan a uno o a varios elementos según algún tipo de característica que como tal no se ha detallado en el documento.
- Pseudo-clase. Define el estado en el que se encuentra un elemento y se detalla agregando el caracter : al selector. Por ejemplo, cuando se pone el ratón encima de un link sin llegar a clicarlo (:hover) o cuando se desea acceder a un elemento concreto dentro de una lista: :nth-child().
- Pseudo-elemento. Su sintaxis se define por el carácter :: y, a distinción del anterior, sólo permite añadir estilos a elementos estructurales abstrayéndonos de referencias. Es decir, no están asociados a ningún tipo de estado.
En la página www.w3.org/TR/selectors-4/ se especifican todos los selectores existentes. Además, dentro de cada regla, debemos definir un bloque de declaraciones. Este contiene todas las especificaciones necesarias para poder añadir estilos al selector señalado. Cada una de estas declaraciones está separada por un punto y coma (;), y la mayoría de las veces, se detallan en líneas diferentes. Cada declaración contiene una propiedad y un valor (text-decoration: none;). Pongamos un pequeño ejemplo para entenderlo de una forma mucho más clara. Supongamos que en una página concreta de nuestro sitio web tenemos definidas varias etiquetas de esta manera. “Nos gustaría cambiar su diseño por algo mucho más atractivo y visual”. Un diseño que llame la atención al lector. Para ello, podríamos crear dentro de alguno de los ficheros CSS ya existentes algo como:
h3.subtitulos {font-size: 15px; color: red;}
.subtitulos {text-align: center;}
¿Qué diferencia a estas dos reglas CSS? Sencillo. Mientras que la primera sólo involucra a las etiquetas H3 que tengan la clase subtitulos, la otra engloba a todas aquellas que contengan esa misma clase sin importar qué tipo de elemento sea. De esta forma, si todas las etiquetas Hx del documento (existen sólo 6 tipos: H1.. H6) compartieran esta clase, no haría falta indicarlo en cada uno de los tipos. En este enlace www.w3schools.com/cssref se pueden ver todas las propiedades perfectamente listadas.
Una de las características más importantes de CSS es la de poder gestionar los estilos según el dispositivo donde se visualice nuestra aplicación. Permite controlar a nuestro antojo todo tipo de variaciones en el diseño. No es lo mismo mostrar una página web en un smartphone, que en desktop. Para esto se crearon se crearon precisamente las Media queries, las cuales hoy en día siguen siendo la piedra angular del diseño adaptativo (responsive design) de la mayoría de los proyectos. Crearlas es relativamente fácil y apenas requieren de conocimientos programáticos. *
- Anchura de pantalla. Se activan las reglas sólo en aquellas pantallas que cumplen los rangos marcados por las propiedades: max-width y/o min-width.
@media screen and (max-width: 900px) and (min-width: 600px) {body {font-size: 14px;}}
- Orientación del dispositivo. Unido al tamaño de la pantalla hay que tener muy en cuenta, más aún con el auge de móviles y tablets, el sentido en el que se está visualizando el contenido: portrait o landscape.
@media only screen and (orientation: landscape) {body {font-size: 18px;}
}
Después de haber entendido el funcionamiento básico de este lenguaje y aprovechando que ya conocemos cuáles son las diferentes partes de las DevTools de Chrome, es el momento oportuno para detallar cómo podemos usarlas en favor de nuestro trabajo. Básicamente, lo que debemos conocer está dentro de la pestaña Elements. Además del panel izquierdo, donde como ya se ha explicado podemos modificar cualquier parte del código al momento, en la parte derecha existe un submenú donde destacan dos pestañas:
- Styles. Todas las reglas CSS vinculadas al elemento seleccionado. Podemos añadir, modificar o eliminar cuanto queramos.
- Computed. Representación visual y estructurada de las propiedades del elemento seleccionado. Si intentamos editar alguna volveremos a la pestaña anterior. En ambos casos existe la opción de dirigirse al archivo CSS concreto donde están recogidos todos los estilos. Lo cual es útil para identificar rápidamente dónde se tendrían que hacer los cambios si fueran necesarios.