| Definición | Establece el color del texto de un elemento |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores: |
| Valor inicial | Depende de cada navegador, pero normalmente es el color negro |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | si |
| Definición en el estándar | w3.org/TR/CSS21/colors.html#propdef-color |
Ejemplos de uso
La propiedad color establece el color con el que se muestra el texto contenido en un elemento. El color de la letra no puede ser transparente, ya que se debe indicar explícitamente un color mediante cualquiera de las diferentes formas de indicar un color en CSS:
El valor de esta propiedad se hereda de padres a hijos. De esta forma, si se establece el color de la letra de un párrafo, todas sus etiquetas interiores muestran el mismo color, salvo que se indique explícitamente lo contrario:
<p style="color: #369;">Lorem ipsum dolor sit amet, consectetuer <em>adipiscing elit</em>. Praesent tempor enim id metus. <span>Vivamus augue</span>. Nam risus. Morbi auctor. Phasellus dapibus <strong>urna sed ligula</strong>. Nam vehicula, <ins>diam sed viverra</ins> vestibulum, ipsum metus molestie dolor, id mattis <del>arcu dui eu nulla</del>. Praesent hendrerit faucibus ligula.</p>
En el ejemplo anterior, el elemento <p> tiene en su interior cinco elementos diferentes (<em>, <span>, <strong>, <ins> y <del>). Aunque sólo se ha establecido la propiedad color en el elemento padre (<p>) todos los elementos interiores muestran el mismo color de letra porque lo heredan directamente de su padre.
Si algún elemento interno no debe heredar el color de letra de su padre, se debe establecer de forma explícita la propiedad color para ese elemento:
<p style="color: #369;">Lorem ipsum dolor sit amet, consectetuer <em>adipiscing elit</em>. Praesent tempor enim id metus. <span>Vivamus augue</span>. Nam risus. Morbi auctor. Phasellus dapibus <strong style="color: #936;">urna sed ligula</strong>. Nam vehicula, <ins>diam sed viverra</ins> vestibulum, ipsum metus molestie dolor, id mattis <del>arcu dui eu nulla</del>. Praesent hendrerit faucibus ligula.</p>
Aunque la propiedad color se hereda, existe una excepción importante relacionada con los enlaces. Por defecto, los enlaces no muestran el mismo color de letra que su elemento padre:
<p style="color: #396;">Lorem ipsum dolor sit amet, consectetuer <em>adipiscing elit</em>. Praesent tempor enim id metus. <a>Vivamus augue</a>. Nam risus. Morbi auctor. Phasellus dapibus <strong">urna sed ligula</strong>. Nam vehicula, <ins>diam sed viverra</ins> vestibulum, ipsum metus molestie dolor, id mattis <del>arcu dui eu nulla</del>. Praesent hendrerit faucibus ligula.</p>
En el ejemplo anterior, el enlace que se encuentra en el interior del párrafo no se muestra del mismo color verde que el resto de elementos del párrafo. El motivo es que los enlaces no heredan el valor de la propiedad color. Por lo tanto, los enlaces siempre se ven del color establecido en la página (rojo en este caso) o del color azul por defecto.
Utilizando el valor inherit es posible forzar a que los enlaces hereden su color de letra:
<p style="color: #369;">Lorem ipsum dolor sit amet, consectetuer <em>adipiscing elit</em>. Praesent tempor enim id metus. <a style="color: inherit;">Vivamus augue</a>. Nam risus. Morbi auctor. Phasellus dapibus <strong">urna sed ligula</strong>. Nam vehicula, <ins>diam sed viverra</ins> vestibulum, ipsum metus molestie dolor, id mattis <del>arcu dui eu nulla</del>. Praesent hendrerit faucibus ligula.</p>
El ejemplo anterior funciona correctamente en todos los navegadores salvo en Internet Explorer 7 y sus versiones anteriores.
Por otra parte, como el valor de la propiedad color se hereda, es muy fácil establecer el color de letra de todos los elementos de la página. Si se establece la propiedad color en el elemento <body>, todos los elementos de la página heredan su valor salvo que se indique lo contrario.
Por este motivo, una de las reglas CSS que utilizan prácticamente todas las páginas web es la que establece el color de la letra en el elemento <body>:
body {
color: #CCC;
}Junto con la regla anterior se suelen añadir algunas otras reglas que establecen colores de letra diferentes en otros elementos destacados, como los enlaces y los títulos de sección:
body {
color: #CCC;
}
h1, h2, h3, h4, h5, h6 {
color: #000;
}
a {
color: #B1251E;
}Por último, como se trata de una propiedad relacionada con la tipografía y todas esas propiedades comienzan por font-, algunas veces se confunde la propiedad color con la propiedad font-color, que no existe y por tanto no tiene ningún efecto sobre el diseño de la página.