Al igual que HTML, CSS (Hojas de Estilo en Cascada o Cascading Style Sheets por sus siglas en inglés) no es un lenguaje de programación. Tampoco es un lenguaje de marcado. CSS es un lenguaje de hojas de estilo. CSS es lo que se utiliza para dar estilo a los elementos HTML de forma selectiva.
- Wiki del CSS Working Group (Inglés).
Con CSS responderemos, entre muchas otras, a preguntas del tipo:
- ¿Cómo hacemos que el texto sea rojo?
- ¿Cómo podemos hacer que el contenido se muestre en un lugar determinado del diseño (de la página web)?
- ¿Cómo decoramos nuestra página web con imágenes y colores de fondo?
¿Por Qué Usar CSS?
CSS se utiliza para definir los estilos de nuestras páginas web, incluyendo el diseño, la disposición y las variaciones de visualización para diferentes dispositivos y tamaños de pantalla.
Por ejemplo, el código CSS que vemos a continuación, selecciona el texto del párrafo y establece su color en rojo:
p {
color: red;
}CSS Resolvió un Gran Problema
HTML nunca fue diseñado para contener etiquetas que diesen formato a una página web si no que se creó para describir el contenido de una página web como vimos en la introducción a HTML:
<h1>Esto es un encabezado de nivel 1</h1>
<p>Esto es un párrafo</p>Por eso, cuando se quiso ir un paso más allá en el diseño y se introdujeron etiquetas como <font> y atributos como color a la especificación HTML 3.2, comenzó una pesadilla para los desarrolladores web.
Tener que añadir a cada página el código para dar formato y color a los contenidos, hacía que desarrollar sitios web grandes se convirtiese en un proceso largo y costoso.
Para resolver este problema, el Consorcio de la World Wide Web (W3C) creó el CSS eliminando así la obligatoriedad de añadir el formato de estilo dentro de la página HTML.
Aunque añadir estilos en línea dentro de los elementos HTML sigue siendo todavía posible mediante el atributo style, es considerado una mala práctica debido a que no se estaría separando el contenido del diseño y, por lo tanto, se estaría incumpliendo el principio de separación de intereses.
Implementando el Código CSS
Usando un editor de código como Visual Studio Code, pegamos las tres líneas de CSS que hay arriba en un nuevo archivo. Lo guardamos en un archivo con el nombre de main.css dentro de un directorio que llamaremos styles.
Para que el código funcione, tenemos que aplicarlo a su documento HTML. De lo contrario, el estilo no cambiará la apariencia del HTML.
- Abre tu archivo index.html y pega la siguiente línea dentro del head que quede de la siguiente manera:
<head>
<link href="./styles/main.css" rel="stylesheet">
</head>Guardamos el archivo index.html y lo cargamos en nuestro navegador. Deberíamos ver algo así:
El código HTML quedaría de la siguiente manera:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./styles/main.css" rel="stylesheet">
<title>01. Introducción a CSS 3</title>
</head>
<body>
<h1>01. Introducción a CSS 3</h1>
<p>Esto es un párrafo</p>
<ul>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
</ul>
<p>Esto es otro párrafo</p>
</body>
</html>Y con esto ya tendríamos una más que buena introducción a CSS en la que hemos visto un poco de historia y técnica. Ahora, a continuación, vamos a empezar a desmenuzar la sintaxis de CSS.
