Add a background color to our website

/ CSS / By

If we want to add a background color to our website we will have to use the styles CSS. In the past, although it works for compatibility, it was not necessary to use style sheets since the language HTML allowed us to do it in a very simple way using the background attribute of the body. But this has already become obsolete and must now be used CSS.

The truth is that doing it with CSS, it is not very complicated either. The colors in CSS are specified by a single property, which is the
background
, which supports or
colors
 or
references to images
 to use as a background on our website.

If we get down to work, the first thing we have to do is insert the element
style
of the language HTML, which allows us to define styles CSS on our website. These elements will go inside the header of the page, delimited by the elements
head
.

The code that will be left will be similar to the following:

<html>
  <head>
    <title>Page Background Color</title>
    <style>// Styles</style>
  </head>
  <body>
  </body>
</htm>

Now, inside the code CSS we will use the property
background
that will define the style for us. This property
background
we will use it on the selector
body
. This way it will affect the entire page. We would have the following code:

body{ 
  background:red; 
}

The value of the color can go through the name in English (
network
,
yellow
,
blue
,
pink
,…) or in RGB format (
#f00
,
#fa0
,
#00f
,…). In the second case you have to be careful since before the RGB value you have to include a pad.

Thus, the color red can be specified with
«network»
 or with
«#f00»
.

The final code of both our page HTML as from the code CSS to set the background color to our website it will be as follows:

<html>
  <head>
    <title>Page Background Color</title>
    <style>
      body{
        background:red;
      }
    </style>
  </head>
  <body>
    <h1>Web Page with Red Background Color</h1>
  </body>
</html>