Programaclic

6. CSS: el color de fondo (propiedad 'background-color)

Ratón de ordenador

Hay muchas más etiquetas, por supuesto, pero vamos a conocer otros aspectos con los que podrás encontrarte al programar. Por ejemplo, la presentación, que se recomienda definir mediante las hojas de estilo en cascada (CSS).

Si no le añadiéramos información sobre la presentación, veríamos la página más o menos como aparece en el código fuente: líneas de texto unas detrás de otras pero sin etiquetas. ¿Te lo imaginas?

En Programaclic, vamos a ver la forma más sencilla de añadir esa información o, dicho de otro modo, de darle los estilos que queramos. Si decides continuar aprendiendo verás que existen otras técnicas más adecuadas, pero por ahora solo vamos a tratar de entender en qué consiste todo esto. Estos estilos (color, medidas, bordes, distancias, posiciones de los objetos, etc.) los introducimos en el código fuente mediante la etiqueta o el atributo ‘style’. Fíjate en el ejemplo:

<style type="text/css">

h1 {

font-size: 300%;

color: white;

text-align: center;

background-color: maroon;

}

</style>

Le hemos dado estilos de presentación al encabezado principal -al título- de la página (elemento h1 de HTML). Hemos definido el tamaño de la fuente (font-size), el color del texto (color), su alineación (text-align) y el color de fondo (background-color). ¿Sabías que estos estilos puede definirlos el propio usuario?

¡Ahora te toca a tí!

Vamos a cambiar el color de fondo de esta caja de texto, donde se presenta el contenido de la casilla 6. Mira el código:

article.cas {background-color: white;}

Ahora es blanco, ¿verdad?. Así lo indica la propiedad 'background-color', con el valor 'white'. Cambia este valor por: cyan, beige, black o maroon. Solo tienes que escribir la regla de estilo, con el color seleccionado, siguiendo el modelo dado:

article.cas {background-color: white;}

Después activa el botón 'Comprobar' para ver los cambios en la presentación. Puedes probar con los cuatro colores, si lo deseas. Si no te funciona, fíjate bien en cómo has escrito la regla: con los espacios en blanco, los nombres de los colores bien escritos, etc.

Volver al juego