¿Qué es CSS y para qué se utiliza?

CSS (Cascading Style Sheets – Hojas de Estilo en Cascada) es el lenguaje de etiquetado que se utiliza comúnmente para dar formato a los documentos HTML. Un documento de hipertexto HTML, en cualquier navegador adquiere un formato predeterminado. Si queremos que nuestra web se muestre de forma diferente, entonces deberemos de utilizar estilos CSS para modificar este aspecto. Un ejemplo de CSS, para modificar el estilo de los títulos h1 sería:

h1 {     font-size: 28px; /* Define el tamaño del texto */     color: blue; /* Define el color del texto */     margin-bottom: 24px; /* Define el espacio que queda debajo del texto */  }

Este trozo de código, tal cual está escrito, podrías copiarlo y pegarlo en tu web y los títulos H1 quedarían así:

Ejemplo de cómo quedarían los H1

He escrito comentarios para que entendáis lo que hace cada una de las líneas que he escrito. Los comentarios en CSS se escriben entre /* para abrir y */ para cerrar. Es importante que se cierren los comentarios porque si no todo lo que sigue se considerará comentario.

¿Cómo actúa el CSS?

El CSS trabaja mano a mano con el HTML. Así que para poder aplicar un estilo a una parte concreta del HTML deberás de “llamarlo” por su nombre. Esto quiere decir que deberás de “llamar” a etiquetas, clases, identidades, tipos, etc. para entonces aplicarles los estilos.

La anatomía del CSS

p {     font-size: 16px; }

Con el pequeño ejemplo que te acabo de poner arriba entenderás esto fácilmente. La letra minúscula p está seleccionando a los párrafos en el HTML. Está haciendo la función de ‘Selector’. Por cada selector se tiene que abrir y cerrar corchetes { }. Estos corchetes indican que dentro están las declaraciones que afectan a ese selector.

Las declaraciones se componen por propiedades, valores y unidades. Ahora mismo existen más de 250 propiedades CSS. En la web de w3school tienes el listado completo, aunque me he dado cuenta de que falta CSS Grid, la última novedad. Estas propiedades van aumentando cada año, ya que se van añadiendo nuevas continuamente.

Los valores y las unidades dependen del tipo de propiedad. Para saber cuales son los valores de cada propiedad puedes mirarlo en el enlace que te he dejado antes. Las declaraciones se separan unas con otras utilizando ; al final.

Aquí te dejo el ejemplo de antes, pero con la anatomía:

[Selector] { <- comienzan las declaraciones  [propiedad]: [valor] [unidad]; <- separa las declaraciones } <- terminan las declaraciones

¿Cómo escribir los selectores?

Los selectores, como su nombre bien indica, se encarga de seleccionar los contenedores HTML por sus clases, su identidad o su relación con otros contenedores.

Para hacer referencia a un tipo de contenedor, como por ejemplo título h2, se escribiría directamente h2 { … }. Para llamar a un h2 más específico, en HTML empezaríamos a añadir clases o identidades. Para hacer referencia a clases se escribe con un punto . delante, y para hacer referencia a una identidad ID se escribe con un # delante.

Ejemplo, un h2 con clase ‘subrayado’ e identidad ‘ultimo-subtitulo’ en HTML se vería así:

Este es el último subtítulo

Para hacer referencia a este contenedor específicamente, con esta clase y esta identidad, en CSS deberemos de escribirlo así:

h2#ultimo-subtitulo.subrayado {     /* aquí las declaraciones */ }

¿Porqué CSS se llama estilos en cascada?

Los estilos CSS se denominan en cascada porque se va ejecutando de arriba abajo, aplicándose por jerarquía, orden y especificidad. Es decir, que el último o el más específico gana. Los selectores de CSS no dejan de ser unas reglas aplastándose unas a las otras, por eso, al escribir CSS debemos de ser muy organizados para no perder el control de las propiedades.

Para explicarte mejor lo de la jerarquía te pondré un ejemplo. Imagina que al principio de tu archivo de estilos defines el tamaño de los h1. Después de 2000 líneas de código decides de hacer una modificación a la altura de los tamaños de los h1 y no te acordabas de que ya lo habías escrito antes. Pues la segunda definición, la última que has escrito, prevalecerá sobre las demás.

La especificidad también juega un papel importante. Siguiendo con el ejemplo anterior, si tú quieres cambiar el tamaño sólo al primer h1, que causalmente le has añadido la clase “mas-grande”, simplemente con escribir h1.mas-grande como selector, aunque después vuelvas a definir los h1, el h1.mas-grande prevalece al ser más específico. No está de más mencionar que las identidades son más específicas que las clases.

El CSS es un lenguaje vivo

Antes de dejarte con los últimos artículos, me gustaría mencionarte que CSS, en este caso CSS3, es un lenguaje vivo, que se va actualizando con los años, añadiendo nuevas funciones, propiedades y tecnologías.

Por ejemplo, la evolución de la maquetación ha mejorado infinitamente con los años. Al principio para alinear las cosas se debían usar hacks y floats. Con la aparición de Flexbox, esto se simplificó y se mejoró la capacidad de alinear tanto en vertical como en horizontal. Ahora tenemos CSS Grid que revoluciona la manera de maquetar completamente una web.

Interacciones con los lectores

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *