¿Qué es CSS y para que sirve el lenguaje CSS?

La Web no sería lo mismo sin el lenguaje CSS. ¿Pero qué es CSS, qué significa, para qué se utiliza y cómo funciona? Si quieres saberlo, sigue leyendo, pues te explicaré los fundamentos del CSS como lenguaje de diseño web.

¿Qué es CSS (lenguaje de estilos)?

CSS es un lenguaje de diseño gráfico que permite personalizar, con mucho de detalle, la apariencia de los documentos web. Y aunque este es el uso más común que se le da, en general se puede aplicar a cualesquiera interfaces de usuario en HTML o XML. Por ejemplo, XHTML, SVG, XUL, RSS, etc.

El lenguaje CSS es muy poderoso, ya que al usarlo puedes personalizar todos los elementos que desees: texto, imágenes, enlaces, botones, etc. De hecho, en un documento web, no hay elemento al que no puedas darle la apariencia que desees mediante CSS.

Ahora que sabes qué es CSS en programación web, veamos el significado de esta palabra y cómo funciona en general el lenguaje CSS.

¿Qué significa CSS y cómo funciona?

¿Qué significa CSS? Acrónimo de Cascading Style Sheets, se traduce al español como “Hojas de Estilo en Cascada”. Abordemos significado de esto con más detalle.

Cascadas

El concepto de “cascada” implica que el orden de las reglas de estilo es importante. Por ejemplo, si creas dos reglas que se aplican a los encabezados h1, se aplicará siempre la última.

De ahí la necesidad de especificar a qué selector se aplica determinada regla. Un ejemplo de selector es la clase o el id de un elemento web (por ejemplo, un párrafo o un encabezado).

Para que lo entiendas, imagina que creas dos reglas de estilo consecutivas para los encabezados h1, una que pone la letra azul y otra que la pone roja. El código se vería parecido a esto:

h1 {
	color: blue;
}
h1 {
	color: red;
}

Si no se especifica más nada, se aplicará el color rojo a todos los encabezados h1 del documento.

Especificidad

Pero supongamos que deseas que haya un tipo de encabezado azul, no rojo. Se podría entonces definir una clase y especificar que la primera regla se aplique solo a los encabezados h1 de dicha clase. Vamos a llamarla “blue-header”. El código quedaría así:

h1.blue-header{
	color: blue;
}
h1 {
	color: red;
}

De este modo, todos los encabezados h1 serán rojos, excepto los que sean de la clase “blue-header”. Un encabezado h1 de esta clase se vería en HTML parecido a lo que sigue:

<h1 class=”blue-header”>Encabezado 1</h1>

A esta especificación de estilos utilizando selectores (no solo las clases, sino los identificadores, etc.), es a lo que se le llama “especificidad”, otro concepto vital del CSS.

Por supuesto, en realidad el lenguaje CSS es más complejo que lo explicado, y no siempre funciona como quiere el diseñador. De ahí la importancia de dominar a fondo no solo los conceptos de cascada y especificidad, sino también de herencia.

Herencia

La herencia significa que las reglas definidas para los elementos padres, se aplican a todos los elementos hijos. Supón, para que lo entiendas, que el encabezado h1 del ejemplo tiene una etiqueta span dentro:

<h1 class=”blue-header”>Esto es un <span>Encabezado 1</span></h1>

El texto dentro del span se verá azul, ya que es un elemento hijo del elemento padre (el h1 de clase “blue-header”).

Sin embargo, gracias a la especificidad podemos cambiar la manera en que la herencia se comporta. Podríamos hacer, por ejemplo, que las etiquetas span dentro de los h1 de clase “blue-header” sean verdes, añadiendo la siguiente regla:

h1 .blue-header span{
	color: green;
}

Ahora que sabes qué significa CSS en informática y algunos conceptos clave relacionados con este lenguaje, te invito a profundizar mejor el tema. Y no olvides compartir este artículo con tus amigos de las redes sociales, o dejarme un comentario con tu opinión o cualquier duda que tengas.