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>