La propiedad background-color

Con la propiedad background-color lo que hacemos es darle un color de fondo al elemento, hay varias formas para definir un color, vamos a ver dos de ellas, la primera y más sencilla es escribiendo el nombre del color en inglés, pero como te puedes imaginar esta manera es muy limitada ya que no abarca todos los colores, la otra es a través del código RGB hexadecimal, de las siglas de RED (rojo), GREEN (verde), BLUE (azul), de esta manera podemos obtener casi cualquier color, lógicamente no hay que aprenderselos para eso ya hay muchos sitios en internet con paletas de colores, que con solo pulsar el color que quieres te da el código. Para que te hagas una idea, en este enlace puedes obtener el código de cualquier color.

Códigos de colores web

Mira estos dos ejemplos, uno con el nombre del color en inglés y el otro con su código RGB que también es el color azul, si te fijas, el código RGB siempre comienza por una almohadilla # seguido de 3 o 6 caracteres, que incluyen los números del 0 al 9 y las letras de la A a la F.

<div style="background-color: blue;"></div>
<div style="background-color: #0000FF;"></div>

La propiedad color

Al igual que la propiedad anterior la propiedad color se utiliza para dar color, pero en este caso al texto.

<p style="color: blue;"></p>
<p style="color: #0000FF;"></p>

Todos a la vez

Ya tienes una pequeña idea de como aplicar estilo dentro de una etiqueta, solo hay que ir añadiendo su propiedad con su correspondiente valor, en los ejemplos anteriores hemos añadido una propiedad y un valor pero se pueden añadir tantos como queramos, tan solo recuerda separarlos por un punto y coma cada vez que quieras añadir una nueva propiedad, aqui tienes un ejemplo con cuatro propiedades juntas.

<div style="width: 200px; height: 100px; background-color: #ddd; color: blue;">
  Esta caja mide 200px de ancho por 100px de alto y su color de fondo es gris.
</div>

Y aqui aplicandole estilo en la cabecera.

<!DOCTYPE html>
<html>
  <head> 
    div {
      width: 200px;
      height: 100px;
      background-color: #ddd;
      color: blue;
    }
  </head>
  <body> 
    <div>
      Esta caja mide 200px de ancho por 100px de alto con un color de fondo gris y color del texto en azul.
    </div>
  </body>
</html>

Ya ves lo fácil que es aplicar estilo dentro de una etiqueta html, como he mencionado antes no es lo más adecuado aunque he creido importante que vieras como se hace por si necesitarás utilizarlo alguna vez, en la siguiente lección pasaremos a aplicar estilo en un documento externo CSS, así además de ahorrar código, trabajo y tiempo, tu código sera mas legible.

Daniel Fernández Velázquez

Me encanta aprender y practicar la programación web, Autodidacta y apasionado de la tecnología.