• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Color y fondo

Log in or subscribe for free to enjoy all this course has to offer!

Continuemos viendo las propiedades CSS existentes. Ahora vamos a ver las propiedades directa o indirectamente relacionadas con el color. Vamos a ver entre otras cosas:

  • cómo cambiar el color del texto;

  • cómo añadir un color o una imagen de fondo;

  • cómo añadir sombras;

  • cómo variar los niveles de transparencia

¡CSS todavía tiene muchas sorpresas guardadas!

Color del texto

Vayamos al amplio tema del color.

¿Qué quieres decir con «amplio»?

Ya conoces la propiedad usada para cambiar el color del texto: es color. Vamos a ver las diferentes formas de especificar el color, ya que hay varias.

Especificar el nombre del color

La manera más sencilla y más cómoda de elegir un color es escribir su nombre.
El único problema con este método es que sólo hay dieciséis colores llamados «estándar». Aunque hay otros colores informales, no molestaré enseñándolos ya que no funcionan necesariamente de la misma manera en todos los navegadores.

La siguiente figura muestra los dieciséis colores que puedes usar simplemente escribiendo su nombre.

Los dieciséis nombres de colores que pueden usarse en CSS
Los dieciséis nombres de colores pueden usarse en CSS

Para cambiar el color de todos los títulos a marrón, deberías ingresar:

h1
{
    color: maroon;
}

Puedes ver el resultado en la siguiente figura.

El título está escrito en marrón
El título está escrito en marrón

Notación hexadecimal

Pero dieciséis colores parecen un poco limitados cuando consideras que la mayoría de los monitores pueden mostrar dieciséis millones.
Por otro lado, ten en cuenta que si tuvieras que darle un nombre a cada uno de los dieciséis millones de colores...

Afortunadamente, hay varias maneras en CSS de elegir un color de entre los ya existentes. La primera manera que te enseñaré en la notación hexadecimal. Aunque es muy común su uso en la web, hay también otro método que vamos a ver más tarde.

Así es como se ve el nombre de un color en hexadecimal: #FF5A28. Simplemente, se trata de una combinación de letras y números que especifican un color.
Deberías siempre empezar escribiendo una almohadilla (#) seguida de seis letras o dígitos del 0 al 9 y de la A a la F.
Estas letras o números funcionan en parejas. Los dos primeros dígitos especifican la cantidad de rojo, los siguientes dos, la cantidad de verde y los últimos dos la cantidad de azul. Mezclando estas cantidades (que son los componentes de los colores Rojo-Verde-Azul), puedes conseguir el color que quieras.

Así, #000000 corresponde al negro y #FFFFFF al blanco. Pero ahora no me preguntes qué combinación usar para producir el naranja «puesta de sol», porque no tengo ni idea.

Aquí, por ejemplo, se muestra cómo aplicas el blanco a los párrafos en hexadecimal:

p
{
    color: #FFFFFF;
}

El método RGB

¿Qué significa RGB? Rojo-Verde-Azul (en inglés), que se abrevia como «RGB». Como en la notación hexadecimal, para elegir un color, tienes que definir una cantidad de rojo, verde y azul.

¿Esta historia rara de las cantidades de rojo-verde-azul otra vez?

Sí, pero en este caso, verás que es mucho más práctico y que con un simple programa de dibujo como Paint puedes encontrar el color que quieres. Aquí están los pasos que hay que seguir:

  1. Inicia el programa Paint desde el menú Inicio.

  2. Ve a la sección de Editar colores como se muestra en la siguiente figura.

  3. Se abre una ventana. En la caja que aparece en la derecha, mueve el deslizador para seleccionar el color que quieres. Supongamos que tienes un deseo loco de escribir tus títulos <h1> en rosa (sólo supongamos). Selecciona el color en la ventana, como muestra la siguiente figura.

  4. Apunta las cantidades correspondientes de Rojo-Verde-Azul indicadas en la parte inferior derecha de la ventana (en este caso 240-96-204). Introduce estos valores en el mismo orden en el archivo CSS, como se muestra en el siguiente código.

p
{
    color: rgb(240,96,204);
}

Cambiar los colores en Paint
Cambiar los colores en Paint

Seleccionar un color en Paint
Seleccionar un color en Paint

Como puedes ver en el ejemplo, para usar el método RGB tienes que escribir rgb(Red, Green, Blue) reemplazando «Red, Green, Blue» por los números correspondientes. Para tu información, estas cantidades están siempre entre 0 y 255.

Color de fondo

Para especificar un color de fondo, usa la propiedad CSS background-color Se usa de la misma manera que la propiedad color, en otras palabras, puedes escribir el nombre de un color, introducirlo en la notación hexadecimal o usar el método RGB.

Para especificar el color de fondo de la página web, tienes que trabajar con la etiqueta <body>. De hecho, <body> corresponde con la página web completa, así, cambiando su color de fondo, cambiarás el color de fondo de la página.

Mira con cuidado a este archivo CSS:

/* Estamos trabaando con la etiqueta del cuerpo, y por lo tanto con la página COMPLETA */
body
{
    background-color: black; /* La página de fondo será negra */
    color: white; /*El texto de la página será blanco */
}

El resultado de este código se puede ver en la siguiente figura.

Texto blanco sobre fondo negro
Texto blanco sobre fondo negro

Pero pediste poner la etiqueta del texto del <body> en blanco, y todos los párrafos <p> y títulos <h1> cogerán este color. ¿Qué es eso?

En efecto, quería aprovechar esta oportunidad para hablarte sobre esto. Esto se conoce como herencia. Pero te lo puedo asegurar, nadie ha muerto.

CSS y herencia

En CSS, si aplicas un estilo a una etiqueta, todas las etiquetas que estén dentro cogerán el mismo estilo.

En realidad es fácil de entender e intuitivo. Como sabes, la etiqueta <body> tag contiene, entre otros, las etiquetas del párrafo <p> y del título <h1> .

Si aplico un fondo negro y una etiqueta de texto blanco al <body>, todos mis títulos y párrafos también tendrán un fondo negro y un texto blanco... Este fenómeno se llama herencia: las etiquetas que están dentro de otra etiqueta se dice que «heredan» sus propiedades.

¿Esto significa que TODO el texto de mi página web estará necesariamente en blanco?

No, no necesariamente. Si después dices que quieres que tus títulos estén en rojo, este estilo tendrá preferencia y tus títulos estarán en rojo. Sin embargo, si no especificas nada en particular (como hicimos anteriormente), entonces tus títulos heredarán el color blanco.
Seamos claros, esto no sólo funciona con el color. Todas las propiedades CSS se heredan: por ejemplo, puedes asignar la negrita en la etiqueta <body> y todos tus títulos y párrafos estarán en negrita.

Ejemplo de herencia con la etiqueta <mark>

La gente tiende a pensar que sólo pueden cambiar el color de fondo de su página. Esto no es así: puedes cambiar el fondo de cualquier elemento: tus títulos, tus párrafos, algunas palabras, etc. En este caso, aparecerán destacadas (como si estuvieran marcadas con un subrayador).

Por ejemplo, ¿recuerdas la etiqueta <mark> que se usa para destacar algunas palabras? Lo usaremos otra vez aquí:

<h1>Quién apagó la luz?</h1>

<p>Brr, en esta página está todo negro es una atmósfera un tanto <mark>molesta</mark>, ¿no crees?</p>

Por defecto, el texto aparece con fondo amarillo. Puedes cambiar este comportamiento en CSS:

body
{
    background-color: black; /* La página de fondo será negra */
    color: white; /*El texto de la página será blanco */
}
mark
{
    /* El color del fondo anula el color de la página completa */
    background-color: red;
    color: black;
}

El color de fondo rojo se aplica al texto de la etiqueta <mark>. De hecho, incluso si el fondo de la página es negro, es la propiedad CSS del elemento más específico la que tiene prioridad (siguiente figura).

Un texto rojo destacado sobre un fondo negro
Un texto rojo destacado sobre un fondo negro

¡El mismo principio se aplica a todas las etiquetas HTML y a todas las propiedades CSS! Si dices:

  • mis párrafos tienen un tamaño de 1.2 em;

  • mis textos importantes ( <strong>) tienen un tamaño de 1,4 em

... podrías pensar que podría haber un conflicto. Si el texto importante es parte de un párrafo, ¿qué tamaño debería dársele? ¿1,2 em ó 1,4 em? CSS decide que la declaración más específica tiene prioridad: ya que <strong> se corresponde con un elemento más específico que los párrafos, el texto estará escrito en 1,4 em.

Imágenes de fondo

En los siguientes ejemplos, voy a cambiar la imagen de fondo de la página. Sin embargo, igual que para el color de fondo, no olvides que la imagen de fondo no se aplica necesariamente a toda la página. También puedes poner una imagen de fondo detrás de los títulos, párrafos, etc.

Aplicar una imagen de fondo.

La propiedad usada para especificar una imagen de fondo es background-image. Como valor, tienes que especificar url("nombreimagen1.png"). Por ejemplo:

body
{
    background-image: url("snow.png");
}

Lo que da como resultado lo mostrado en la siguiente figura.

Una imagen de fondo en la página
Una imagen de fondo en la página

Por supuesto, tu fondo no está necesariamente en PNG, pero también puede estar en formato JPEG o GIF.
La dirección que indica a ubicación de la imagen de fondo puede escribirse como una dirección completa ( http://…) o como una dirección relativa ( fondo.png).

Opciones para la imagen de fondo

La propiedad de background-image que acabamos de ver puede suplementarse con otras propiedades que permitan que el comportamiento de la imagen de fondo cambie.

background-attachment: adjuntar el fondo

La propiedad background-attachmentdel CSS se usa para «adjuntar» el fondo. El efecto obtenido es interesante ya que puedes ver ahora el texto «slide» sobre el fondo. Hay disponibles dos valores:

  • fixed: la imagen del fondo permanece fija;

  • scroll: la imagen de fondo se desplaza con el texto (por defecto).

body
{
    background-image: url("snow.png");
    background-attachment: fixed; /* El fondo permanecerá fijo */
}
background-repeat: repetición del fondo

Por defecto, la imagen de fondo se repite en un patrón de mosaico. Puedes cambiar esto con la propiedad background-repeat:

  • no-repeat: el fondo no se repetirá. La imagen será única en la página.

  • repeat-x: el final se repetirá sólo en la primera línea, horizontalmente.

  • repeat-y: el final se repetirá sólo en la primera columna, verticalmente.

  • repeat: el fondo se repetirá en un patrón de mosaico (por defecto).

Ejemplo de uso:

body
{
    background-image: url("sun.png");
    background-repeat: no-repeat;
}
background-position: posición del fondo

Puedes especificar la posición requerida de la imagen de fondo con la background-position. Esta propiedad sólo es útil cuando se combina con background-repeat: no-repeat; (un fondo que no repite).

Tienes que introducir dos valores en píxeles para la background-position para especificar la posición de fondo relativa a la esquina superior izquierda de la página (o párrafo, si solicitas el fondo en un páffaro). Así, si introduces:

background-position: 30px 50px;

... tu fondo será situado a 30 píxeles píxeles de la izquierda y a 50 píxeles de la parte superior. También es posible usar estos valores:

  • top: en la parte de arriba;

  • bottom: en la parte de abajo;

  • left: a la izquierda;

  • center: centrado;

  • right: a la derecha;

Estas palabras se pueden combinar. Por ejemplo, para alinear una imagen en la parte superior derecha, tendrías que escribir:

background-position: top right;

Así que si quiero mostrar un sol como imagen de fondo (figura siguiente), sólo una vez ( no-repeat), siempre visible ( fijo) y posicionado en la parte superior derecha ( top right), I escribiría esto:

body
{
    background-image: url("sun.png");
    background-attachment: fixed; /* El fondo permanecerá fijo */
    background-repeat: no-repeat; /* El fondo no se repetirá */
    background-position: top right; /* El fondo se mostrará en la parte superior derecha */
}
Un sol como imagen de fondo en la esquina superior derecha
Un sol como imagen de fondo en la esquina superior derecha

Propiedades de combinación

Si usas muchas propiedades en relación al fondo (como en el ejemplo anterior), puedes usar una especie de superpropiedad background cuyo valor puede combinar con varias propiedades ya vistas antes: background-image, background-repeat, background-attachment y background-position

Así podemos simplemente escribir:

body
{
    background: url("sun.png") fixed no-repeat top right;
}

Esta es la primera «superpropiedad» que te enseño, pero habrá otras. Deberías saber lo siguiente:

  • El orden de los valores no importa. Puedes combinar los valores en cualquier orden.

  • No tienes que introducir todos los valores. Si no quieres introducir fixed, puedes eliminarlo sin ningún problema.

Varias imágenes de fondo

Desde CSS3, puedes asignar varias imágenes de fondo a un elemento. Para hacer esto, simplemente separa las declaraciones por una coma así:

body{
    background: url("sun.png") fixed no-repeat top right, url("snow.png") fixed;
}

La primera imagen de esta lista se situará en la parte superior de las otras (siguiente figura). Ten cuidado, el orden de declaración de la imagen es importante: si intercambias el sol y la nieve en el código CSS anterior, ¡ya no verás el sol!

Fondo con múltiples imágenes
Fondo con múltiples imágenes

Ten en cuenta que múltiples imágenes de fondo funcionan en todos los navegadores excepto en las versiones más viejas de Internet Explorer, que sólo reconoce esta característica en la versión 9 (IE9).

Transparencia

¡CSS te permite muy fácilmente variar los niveles de transparencia de los elementos! Para hacer esto, usaremos las características CSS3: la propiedad opacity y la notación RGBA.

La propiedad de opacidad

Esta sencilla propiedad de opacity se usa para especificar el nivel de opacidad (lo contrario a transparencia).

  • Con un valor de 1, el elemento será completamente opaco; este es el comportamiento por defecto.

  • Con un valor de 0, el elemento será completamente transparente.

Así que tienes que elegir un valor entre 0 y 1. Con un valor de 0,6, tu elemento será un 60 % opaco... ¡y serás capaz de ver a través de él!

Aquí tienes cómo se puede usar:

p
{
    opacity: 0.6;
}

Aquí tienes un ejemplo que te dará una idea de transparencia. Puedes ver el resultado en la siguiente figura.

body
{
    background: url("snow.png");
}

p
{
    background-color: black;
    color: white;
    opacity: 0.3;
}
Un párrafo transparente
Un párrafo transparente

Ten en cuenta que la transparencia funciona en todos los navegadores, incluyendo Internet Explorer de IE9 en adelante.

La notación RGBa

CSS3 nos ofrece otra manera de variar la transparencia: la notación RGBa. Esto es, en realidad, la notación RGB que vimos antes, pero con un cuarto ajuste: el nivel de transparencia (llamado canal alfa). Con un valor de 1, el fondo es completamente opaco igual que antes. Con un valor de menos de 1, es transparente.

p
{
    background-color: rgba(255, 0, 0, 0.5); /* Rojo, fondo semitransparente */
}

Es tan simple como eso. Puedes conseguir exactamente el mismo efecto que con opacidad usando la notación RGBa. ¡Inténtalo!

Esta notación es reconocida por todos los navegadores más modernos, incluyendo Internet Explorer (de IE9 en adelante). Para los navegadores más viejos, se recomienda especificar la notación RGB convencional así como la RGBa.
Aunque para estos navegadores, el fondo no será transparente, al menos habrá color de fondo.

p
{
    background-color: rgb(255,0,0); /* Para los navegadores más viejos */
    background-color: rgba(255,0,0,0.5); /* Para los navegadores más nuevos */
}

En resumen

  • Cambias el color del texto con la propiedad color y el colo r de fondo con background-color.

  • Puedes especificar un color introduciendo su nombre (black, por ejemplo) en formato hexadecimal ( #FFC8D3) o en notación RGB ( rgb(250,25,118)).

  • Puedes añadir una imagen de fondo con background-image. Puedes elegir adjuntar una imagen de fondo, mostrarla como mosaico o no, e incluso colocarla en cualquier lugar de la página.

  • Puedes hacer una porción de la página transparente con la propiedad o con la notación RGBa (lo mismo que la notación RGB, con un cuarto valor que indica el nivel de transparencia.

Example of certificate of achievement
Example of certificate of achievement