Managing Backgrounds Using CSS

Managing Backgrounds Using CSS
Page content

Managing Backgrounds Using CSS

Would you like to be able to control the background in all of your web pages on a singe web site with one file instead of having to change each page individually? CSS can give you the opportunity to make your web site background consistent without the heart ache of changing each page every time you want to change the background. Cascading Style Sheets or CSS allows the web site designer to make their entire web site consistent by allowing each page to pull from a separate file that contains specific instructions on how that page should be formatted. This article will discuss how to create and use this file and control a web site background and assumes that the reader has a basic understanding of HTML code.

To use CSS and take advantage of formatting all of the pages on a web site you must have two files. In some cases you can use CSS without using two files but it will only format the particular page the code has been installed on.

Here are the basic steps to creating a site that has taken advantage of CSS

Create a web page or web site

Create a .css file

Install a small line of HTML code on all web pages you want the CSS file to control

Creating a .css file is really easy:

Open up notepad

click save as

in the “File Name ” text box type in a name for the file and add “.css” to the end of it

on the “Save as type” box Select “All Files”

Click “Save”

This will save a blank CSS file.

Now open the .css file you just saved. To control just the color of the background put the following code in the file and click save. Xxx is the color, you can type red, blue, green etc or enter the hex color value.

body,

{ background-color: xxx; }

You can also use a background image if you would like by using the following code instead. You can replace xxx.xxx with the image name.

body,

{ background-image: url(“xxx.xxx”) }

After you have created both the web page and the CSS page you will need to link them together. This is done by adding a little piece of code into the head of all the pages you want the CSS file to control. Here’s the code, be sure to replace xxx with the file name you have named it as: