¿Qué es CSS? Introducción a desarrollo web

12min

CSS es un lenguaje que tiene como objetivo definir el aspecto de los documentos HTML, es decir, de las páginas web. Junto con el lenguaje HTML forman un tándem esencial en la web: HTML sirve para especificar el contenido y CSS sirve para indicar cómo debe visualizarse ese contenido en el navegador. El término CSS proviene de las siglas inglés Cascading Style Sheets, que se traduce como Hojas de Estilo en Cascada. 

Índice

¿Qué es CSS en programación?

CSS es un lenguaje para la declaración del aspecto que debe tener un documento. En el mundo de los lenguajes estándares tiene un lugar importante, ya que se usa para el omnipresente HTML, así como para otro lenguaje no tan conocido pero también fundamental como el XML. 

En el mundo del desarrollo es muy importante porque nos sirve para separar las capas de contenido y presentación, permitiendo que los documentos web sean mucho más mantenibles. Esto es porque, con un mismo contenido en HTML podemos cambiar radicalmente el aspecto solamente tocando el CSS. Así, si necesitamos actualizar el contenido, solamente tenemos que hacerlo en el código HTML y si necesitamos depurar el diseño, simplemente tenemos que cambiar el CSS. 

Pero, además, en la actualidad CSS ha ganado todavía más importancia porque nos permite que un mismo documento HTML pueda verse de maneras radicalmente distintas dependiendo del dispositivo con el que accedemos, ya sea un ordenador de escritorio o un móvil.

Fundamentos y principios básicos de CSS

Aunque no pretendemos hacer un curso de CSS en un solo post, vamos a enumerar los puntos más importantes y principios básicos que debemos conocer para usar el lenguaje CSS.

Selectores y reglas CSS

Los selectores son las herramientas que usamos en CSS para determinar los elementos a los que se aplicarán ciertos estilos. Por ejemplo, el selector «p» se refiere a todos los párrafos de un documento o el selector «h1» se refiere al encabezamiento principal.

Una regla CSS se compone de un selector y un conjunto de estilos que queremos aplicar a los elementos seleccionados, que se colocan entre llaves.

p {
    color: red;
}

Aparte del selector de etiqueta existen muchos tipos de selectores con diversas características y utilidad. Queremos mencionar también los selectores de clase, que permiten seleccionar todos los elementos cuyo atributo class tenga un valor determinado. 

Por ejemplo, para el siguiente código HTML

<div class='tarjeta'>Contenido</div>

Se podría seleccionar con:

.tarjeta {
  color: black;
]

Propiedades y valores de estilo

Las propiedades definen qué partes del estilo de los elementos queremos definir. Cuando indicamos una propiedad, por ejemplo el color del fondo, luego tenemos que indicarle el valor que deberá tener, para ello separamos propiedad y valor con dos puntos:

h1 {
  background-color: orange;
}

Cómo se aplica CSS en un documento HTML

Para asociar unas declaraciones de estilos CSS a un documento HTML lo podemos hacer de tres maneras distintas:

Inline

Quiere decir que lo hacemos directamente en el elemento HTML, en la propia etiqueta, usando el atributo style.

<img src='foto.jpg' style='border: 1px solid red;'>

Interno

Este tipo de declaraciones se colocan en el mismo documento HTML, generalmente en la cabecera (head) y afectan a toda la página. Para ello se usa una etiqueta