Text & Background color

En este artículo discutiremos cuán fácil es aplicar color tanto el texto como al fondo de tus paginas web. Comencemos con el color del texto:

Cambiando el color del texto

Si ya has leído los capítulos sobre texto y fuente en CSS, entonces puedes estar tentado de adivinar el nombre de la propiedad utilizada para controlar el color del texto: ¿qué tal font-color o text-color? No realmente, ya que lo que estamos cambiando se suele denominar primer plano (texto) y fondo, la propiedad utilizada para controlar el color del texto se llama simplemente color.

Entonces, ¿cómo podemos usarlo? Es muy, muy simple - veamos este ejemplo:

<p style="color: Red;">Red text</p>
<p style="color: Blue;">Blue text</p>

Y eso es todo lo que necesitas. Como puedes ver, estoy usando los llamados colores con nombre. CSS tiene muchos de estos, pero, por supuesto, no todos los colores del mundo están cubiertos por un nombre - más sobre eso más adelante.

Cambiando el color del fondo

Working with the background color is just as easy. For that purpose, we have a property called background-color. It allows us to change the background color of an element just as easy as we changed the text color, and the two properties can of course be combined:

<p style="background-color: Silver; color: Red;">Red text</p>
<p style="background-color: Gold; color: Blue;">Blue text</p>

As you can see, the two properties goes well with each other, but they don't have to be used simultaneously, if you are already happy with the current background or text color. Since both text and background colors are inherited from their parent element, you can easily be in a situation where you would only need to use one of them:

<p style="background-color: Silver; color: Red;">
	This is red text and <span style="background-color: Gray;">and this text has a darker background</span>.
</p>

Notice how the span element keeps the red text color inherited from the parent paragraph element, while we override the background color with a darker variant of the silver color.

En resumen

Changing both text and background color is very easy with CSS. So far, we have only shown some basic examples, but to go beyond that and use more advanced color combinations, you need to know a bit more about the way color values are constructed with CSS. We'll discuss that in the next chapter.