Artículos
CSS

Poner un color de fondo a nuestra web

07/Dic/2007

Si queremos poner un color de fondo a nuestra web tendremos que utilizar los estilos CSS. Antiguamente, aunque funciona por compatibilidad, no era necesario utilizar hojas de estilo ya que el lenguaje HTML nos permitía hacerlo de una forma muy sencilla mediante el atributo background del elemento body. Pero esto ya ha quedado obsoleto y ahora debe de utilizarse CSS.

La verdad que hacerlo con CSS, tampoco es muy complicado. Los colores en CSS se especifican mediante una única propiedad, que es la propiedad background, la cual admite o colores o referencias a imágenes para utilizarlas como fondo en nuestra página web.

Si nos ponemos manos a la obra lo primero que tenemos que hacer es insertar el elemento style del lenguaje HTML, el cual nos permiten definir estilos CSS en nuestra página web. Estos elementos irán dentro de la cabecera de la página, delimitada por los elementos head.

El código que nos quedará será similar a lo siguiente:

<html>
  <head>
    <title>Color de Fondo de la página</title>
    <style>// Estilos</style>
  </head>
  <body>
  </body>
</htm>

Ahora, dentro del código CSS utilizaremos la propiedad background que nos va a demarcar el estilo. Esta propiedad background la utilizaremos sobre el selector body. De esta manera afectará a toda la página. Nos quedaría el siguiente código:

body{ 
  background:red; 
}

El valor del color puede ir mediante el nombre en ingles (red, yellow, blue, pink,…) o en formato RGB (#f00, #fa0, #00f,…). En el segundo caso hay que tener cuidado ya que antes del valor RGB hay que incluir una almohadilla.

Así, el color rojo se puede especificar con «red» o con «#f00».

El código final tanto de nuestra página HTML como del código CSS para poner color de fondo a nuestra web será el siguiente:

<html>
  <head>
    <title>Color de Fondo de la página</title>
    <style>
      body{
        background:red;
      }
    </style>
  </head>
  <body>
    <h1>Página Web con Color de Fondo Rojo</h1>
  </body>
</html>

Código Fuente

Descárgate el código fuente de Poner un color de fondo a nuestra web
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
13 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios