Introducción
En el módulo de Introducción al HTML, puedes encontrar los conceptos básicos para saber qué es HTML y cómo se usa para definir documentos que puedan se interpretados por un navegador web. Los títulos se verán más grandes que el texto y los párrafos empezarán en una línea nueva y habrá un espacio entre ellos. Los enlaces aparecerán en un color diferente y subrayados para distinguirlos del resto del texto. Estos estilos vienen predeterminados por el navegador y, en la práctica, son estilos muy básicos que el navegador aplica al fichero HTML para asegurarse, básicamente, de que sean legibles incluso si el autor de la página no especifica un estilo explícito. Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así, con los mismos estilos por defecto. Usando CSS se pueden controlar con precisión cómo se ven los elementos HTML en el navegador, pudiendo establecer el diseño que cada uno desee.
¿Para qué sirve CSS?
Como hemos mencionado, el CSS es un lenguaje informático que especifica cómo se presentan los documentos a los usuarios: cómo se diseñan, compaginan, etc.
Un documento suele ser un archivo de texto estructurado con un lenguaje de marcado: HTML es el más común, pero también existen otros como SVG o XML.
Presentar un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los navegadores, como por ejemplo Firefox, Chrome o Edge, están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora.
El código CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el color y el tamaño de los encabezados y los enlaces. Se puede utilizar también para crear un diseño, como podría ser convertir una columna de texto en una composición con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de animación.
Sintaxis de CSS
CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre con letras grandes de color rojo».
El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:
h1 {
color: blue;
font-size: 5em;
}
La regla se abre con un selector. Este selecciona el elemento HTML al que queremos aplicar nuestros estilos. En este caso, cambiaremos el diseño de los encabezados de nivel uno (<h1>).
Luego tenemos un conjunto de llaves { }. Entre estas habrá una o más declaraciones, que tomarán la forma de pares de propiedad y valor. Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.
Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las propiedades CSS admiten diferentes valores, dependiendo de qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad color, que puede tomar varios valores de color. También tenemos la propiedad de font-size, que puede tomar varias unidades de tamaño como valor.
Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra:
h1 {
color: blue;
font-size: 5em;
}
p {
color: green;
}
Algunos valores se aprenden rápidamente, mientras que otros son difíciles de recordar. Las páginas de propiedades individuales que hay en el proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o si deseas saber qué más se puede usar como valor. Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características) enumeradas en la referencia CSS del proyecto MDN. También puedes buscar «mdn css-feature-name» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre alguna particularidad de CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size».
Añadir CSS a un documento
Lo primero que debemos hacer es decirle al documento HTML que hay algunas reglas CSS que queremos que use. Hay tres formas diferentes de aplicar CSS a un documento HTML, sin embargo, por ahora, veremos la forma más habitual y útil de hacerlo: vincular el código CSS desde el encabezado del documento. Para ello bastará con crear un archivo en la misma carpeta que el documento HTML y guardarlo como estilos.css. La extensión .css indicará que nuestro archivo contiene código CSS.
Para vincular estilos.css a index.html, bastará con añadir la siguiente línea en algún lugar dentro del <head> del documento HTML:
<link rel="stylesheet" href="estilos.css">
Este elemento <link> utiliza el atributo rel para indicarle al navegador que debe utilizar una hoja de estilo y especifica la ubicación de esa hoja de estilo con el valor del atributo href. Puedes probar si el código CSS funciona correctamente añadiendo una regla al fichero estilos.css. Para ello puedes usar cualquier editor de código para añadir lo siguiente al archivo CSS:
h1 {
color: blue;
}
Debes tener en cuenta que después de hacer cualquier cambio, deberás guardar los archivos HTML y CSS antes de volver a cargar la página en un navegador web. Ahora el título de nivel uno de la parte superior del documento debería ser azul. Si esto es correcto, ¡felicidades!: has aplicado correctamente un poco de CSS a un documento HTML. Si no cambia el color del encabezado, verifica que hayas escrito todo correctamente.
Puedes continuar trabajando en estilos.css localmente o usar cualquier otro editor (como repl.it) para continuar con este tutorial.
Ejercicio propuesto: Enlazar ficheros y añadir estilos
Nuestro punto de partida en esta unidad es un documento HTML. Copia el código que tienes a continuación y guárdalo en un nuevo archivo HTML para trabajar en tu propio ordenador. Después de eso, crea un nuevo archivo CSS para configurar todos los títulos <h1> en color rojo y guárdalo con el nombre «estilos.css» en la misma carpeta que el documento HTML. Finalmente verifica los resultados usando un navegador y no olvides validar el código.
Recuerda que la parte más importante de este ejercicio es vincular tu archivo CSS colocando una sola línea dentro de la sección <head>. Después de eso, dentro de «estilos.css» solo necesitarás insertar tres líneas:
- HTML file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Empezando con CSS</title>
<!-- Utilizaremos los estilos que tengamos dentro de 'estilos.css' -->
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Yo soy un estilo de nivel 1</h1>
<p>Esto es un párrafo de texto.</p>
<p>Esto es un párrafo y también un enlace a <a href="https://google.com">Google</a>.</p>
<ul>
<li>Primer elemento de una lista</li>
<li>Segundo elemento de una lista</li>
<li>Tercer elemento de una lista</li>
</ul>
</body>
</html>
- Fichero CSS (
estilos.css):
h1 {
...
}
Ejercicio propuesto: Estilos de encabezados
Usando los archivos HTML y CSS del ejercicio anterior, añade algunos encabezados <h2> y cambia el color con el que aparecen utilizando CSS. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
Puede encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Dar formato a elementos HTML
Al poner nuestro título de encabezado en rojo, ya hemos demostrado que podemos elegir un elemento HTML y darle formato. Hacemos esto con un selector de elementos: un selector que coincide directamente con el nombre de un elemento HTML. Para seleccionar todos los párrafos del documento, se usa el selector p. De esta forma, para hacer que el texto de todos los párrafos se muestren de color verde, bastará con utilizar el siguiente código:
p {
color: green;
}
Puedes utilizar múltiples selectores a la vez, separándolos con una coma. Por ejemplo, si queremos que el texto de todos los párrafos y de todos los elementos de cualquier lista sea verde, el código a utilizar sería el siguiente:
p, li {
color: green;
}
Ejercicio propuesto: Cambiar el color de varios elementos
Usando los archivos HTML y CSS del ejercicio anterior, cambia el color de los párrafos y elementos de la lista. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
Puede encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Aplicar formato según el estado
CSS nos ofrece la capacidad de aplicar formato a los elementos en función de su estado. Un ejemplo sencillo es el estilo de los enlaces. Cuando damos formato a un enlace, necesitamos seleccionar el elemento <a> (anchor). Tiene diferentes estados dependiendo de si se ha visitado o no, si se pasa el ratón por encima, o si se presiona con el teclado o se hace clic (se activa). Puedes usar CSS para dar formato a estos diferentes estados. Utilizando el código CSS que se muestra a continuación se deberían visualizar en color rosa los enlaces que no se han visitado y en verde los que sí.
a:link {
color: pink;
}
a:visited {
color: green;
}
También puedes cambiar la apariencia del enlace, por ejemplo, eliminando el subrayado, lo que se logra mediante la siguiente regla:
a:hover {
text-decoration: none;
}
En el ejemplo de arriba hemos eliminado el subrayado del enlace cuando el ratón se pasa por encima, y se puede eliminar de todos los estados de un enlace. Sin embargo, es conveniente recordar que en una página web real deberás asegurarte de que los visitantes sepan reconocer que se trata de un enlace. Que aparezca subrayado puede ser una pista importante para que las personas se den cuenta de que pueden hacer clic en una palabra dentro del párrafo, ya que es a lo que están acostumbrados. Al igual que con todo en CSS, existe la posibilidad de que tus cambios resten accesibilidad al documento.
Ejercicio propuesto: Aplicar estilos a los enlaces
Usando los archivos HTML y CSS del ejercicio anterior, inserta varios párrafos con algunos otros enlaces a tus páginas preferidas y cambia el color de todos los enlaces. También debes usar diferentes colores cuando se ha visitado el enlace y cuando el ratón está sobre el enlace. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como viene siendo habitual, verifica los resultados con tu navegador y no olvides validar el código.
Puedes encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Cambiar el comportamiento predeterminado de los elementos
Cuando visualizamos una página web, incluso con un código tan simple como el de nuestro ejemplo, podemos ver que el navegador facilita la legibilidad de este documento HTML al añadir un estilo predeterminado. Los títulos se muestran grandes y en negrita, y la lista tiene viñetas. Esto sucede porque los navegadores tienen hojas de estilo internas que contienen estilos predeterminados, los cuales se aplican a todas las páginas por defecto. Sin ellos, todo el texto se amontonaría y tendríamos que darle formato desde cero. Todos los navegadores modernos suelen mostrar el contenido HTML por defecto de la misma manera.
Sin embargo, a menudo querrás algo diferente a la elección que ha hecho el navegador. Esto se puede solucionar con el simple hecho de escoger el elemento HTML que deseas cambiar y utilizar una regla CSS para cambiar su apariencia. Un buen ejemplo es <ul>, que muestra una lista desordenada. Por defecto tiene viñetas, pero si decidimos que no las queremos, podemos eliminarlas fácilmente de este modo:
ul {
list-style-type: none;
}
Puedes consultar en MDN la propiedad list-style-type para ver qué valores admite. Echa un vistazo a la página de list-style-type y encontrarás un ejemplo interactivo en la parte superior donde podrás probar diferentes valores (todos los permitidos se detallan más abajo en esa misma página). También descubrirás en esa página que además de eliminar las viñetas de la lista, también puedes cambiarlas.
Ejercicio propuesto: Cambiar las viñetas de una lista
Utilizando los archivos HTML y CSS del ejercicio anterior, intenta configurar el
Deberías obtener un resultado similar a este:list-style-typeconsquare. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
Ejercicio propuesto: Cambiar el estilo de una lista numerada
Usando los archivos HTML y CSS del ejercicio anterior, agregue una lista ordenada (<ol>) y configura el
Deberías obtener un resultado similar a este:list-style-typeconupper-roman. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
Utilizando clases
Hasta ahora, hemos utilizado selectores cuyo nombre se basa en el nombre de elemento que reciben en HTML. Esto funciona siempre que se desee que todos los elementos de ese tipo tengan el mismo aspecto en el documento. La mayoría de las veces no es el caso, por lo que deberás encontrar una manera de seleccionar un subconjunto de los elementos sin que cambien los demás. La forma más común de hacer esto es añadir una clase al elemento HTML y establecer el estilo que se aplicará al utilizar dicha clase.
Puedes añadir un atributo de clase a cualquier elemento dentro de tu fichero HTML. Por ejemplo, podríamos utilizar el atributo «class» sobre elementos de tipo lista de la siguiente forma:
<ul class="lista-roja-con-cuadrados"> <li>Elemento uno</li> <li>Elemento dos</li> <li>Elemento tres</li> </ul> <ul class="lista-azul-con-circulos"> <li>Elemento uno</li> <li>Elemento dos</li> <li>Elemento tres</li> </ul>
Después de escribir ese código HTML, en tu CSS, puedes diseñar las clases lista-roja-con-cuadrados y lista-roja-con-cuadrados creando un par de selectores que comiencen con un punto:
.lista-roja-con-cuadrados {
list-style-type: square;
color: red;
}
.lista-azul-con-circulos {
list-style-type: circle;
color: blue;
}
Para observar el resultado después de escribir nuevo código HTML y CSS, bastará con guardar los archivos y refrescar el contenido del navegador pulsando Ctrl+F5.
Ejercicio propuesto: Estilos diferentes para cada lista
Usando los archivos HTML y CSS del ejercicio anterior, añade varias listas para obtener algo similar al resultado que se muestra a continuación. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
En lo que respecta a las listas no ordenadas (<ul>) debes crear 4 clases diferentes, cada una de ellas con un valor diferente de la propiedadlist-style-type(none,disc,circle,square). Para las listas ordenadas (<ol>) debes crear otras clases, cada una también con valores diferentes para la propiedadlist-style-type(upper-roman,lower-greek,lower-alpha,upper-alpha).
Ejercicio propuesto: Usar CSS con encabezados, párrafos y texto general
Cambia el color de diversos elementos de ejercicios previos de HTML en los que utilizaste encabezados, párrafos y texto formateado en las unidades 1 y 2 (https://fernandoruizrico.com/html-unidad-1/ and https://fernandoruizrico.com/html-unidad-2/). No olvides validar tu código de nuevo.
Recuerda que puedes encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Ejercicio propuesto: Usar CSS con hipervínculos
Cambia el color de diversos elementos de la unidad 3 de HTML (https://fernandoruizrico.com/html-unidad-3/). No olvides validar tu código de nuevo.
Recuerda que puedes encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Ejercicio propuesto: Usar CSS con listas
Cambia el color, las viñetas y la numeración de diversas listas de los ejercicios de listas de la unidad 4 de HTML (https://fernandoruizrico.com/html-unidad-4/). No olvides validar tu código de nuevo.
Recuerda que puedes encontrar las palabras clave que identifican diversos colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.