Tutorial: External style sheets

Contents

 

1. Introduction & Tools

2. How external style sheets and html work together and what each does

3. Linking the html and the external style sheet

4. A bit about writing css in an external style sheet

5. Putting the css into the html code

6. Page body & page backgrounds

7. Text

8. Text links

9. Image links

10. Borders

11. Containers (DIVs)

12. Simple Containers (DIVs)

13. A DIV inside a DIV

14. Container as rows or columns

15. Two columns

16. Three columns

17. More Tools for css

18. Validating and checking the code

19. Creating a site

20. Working with backgrounds: single DIV background page

21. Working with backgrounds:
multiple DIV backgrounds

Bookmark this page

Creating a fixed-width DIV with one image as a centered background

The first site we'll create with CSS will be a simple DIV with a centered background and rows and columns on top. This is a really handy layout not only because it's simple and looks good, but also because you can go back and update the look of the whole site by changing one graphic. We'll be creating a fixed width page here but many of the principles should apply to flexible width pages as well.

I'll use Anniemation as the example for this tutorial. Remember this is just a guide, the possibilibites with this type of CSS and design are endless. I chose white as the overall color. I wanted a soft ethereal look to it all so in Photoshop, I softened the edges of the image around where it will meet with the page background. The text of the page is going to go over this background image so I made sure that the image is light enough for it to be readable over it.

Another advantage of this type of design is that it doesn't require a lot of image slicing. Basically it involves saving one image for web. It's best to keep the width of the image at 950 pixels wide but the heigth of the image can vary. I crop the image to take out the extra space at the bottom.The above screenshot shows it just before it is saved for web. The background image ends up being 950 pixels wide x 587 pixels high, and only 35.74K saved at jpg High in Photoshop.

Setting up the CSS

Dropping the background into the page is easy. The following bit of CSS puts it in a single column.

body {

background-color: White;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}

#wrapper
{
width: 950px;
margin: 0px auto;
text-align: left;
background-repeat: no-repeat;
background-image: url(one-background.jpg);
}

 

The html so far would look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>one column with simple background CSS example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="one-background.css" media="screen">

</head>
<body>

<div id="wrapper">

</div>

</body>
</html>

Click here to see an example. The wrapper has no height set in the CSS so there are line breaks in the HTML ( <p>&nbsp;</p> ) to make the height of the wrapper div long enough to show the background. If you have everything right at this point and your background doesn't show up, add line breaks (<p>&nbsp;</p>) to your html.

The next thing to do is add the rows and columns that will go over the background. We'll put these inside the wrapper (DIV) that holds the background.

 

Adding the rows

First we'll add three rows.

Top row: this row will be a place holder for the top of the background.
Middle row: a row that will eventually hold the columns
Bottom row: this can hold a footer graphic or a second set of site navigation

I'll call them #header, #main, and #footer. I've given each row a different background color to show how they look. There is no height value in any of the rows, only line breaks in the html.

The CSS code so far looks like this:

body {

background-color: White;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}

#wrapper
{
width: 950px;
margin: 0px auto;
text-align: left;
background-repeat: no-repeat;
background-image: url(one-background.jpg);
}

#header
{
width: 950px;
margin: 0px auto;
background-color: Silver
}

#main
{
width: 950px;
margin: 0px auto;
background-color: Green;
}

#footer
{
width: 950px;
margin: 0px auto;
background-color: Blue;
}

The html looks like this. Notice how the rows are INSIDE the wrapper div that holds the background. There is no height specified for the rows, just some line breaks so they show up.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>one column with simple background CSS example with rows</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="one-background-with-rows.css" media="screen">

</head>
<body>

<div id="wrapper">

<div id="header">

</div>


<div id="main">

</div>


<div id="footer">

</div>


</div>

</body>
</html>

Click here to see the page live.

 

Adding some columns

Next we'll add two columns inside the "main" div. On my site, I use the left column to hold the site navigation and the right column to hold the page body. I'll call these columns "left" and "right". They will have a fixed width of 250 pixels for the "left" and 750 pixels for the "right". I gave them a pink and black background to make them stand out.

These columns will be right next to each other so we have to tell them where to go. Here's where the "float" bit of CSS comes in.

Here's the CSS thus far. Notice the "floats" in the left and right columns.

body {

background-color: White;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}

#wrapper
{
width: 950px;
margin: 0px auto;
text-align: left;
background-repeat: no-repeat;
background-image: url(one-background.jpg);
}

#header
{
width: 950px;
margin: 0px auto;
background-color: Silver
}

#main
{
width: 950px;
margin: 0px auto;

}

#footer
{
width: 950px;
margin: 0px auto;
background-color: Blue;
}

#left
{
width: 200px;
margin: 0px auto;
float: left;
background-color: Black


}

#right
{
width: 750px;
margin: 0px auto;
float: right;
background-color: Fuchsia;

Below is the html thus far. Once again, there are line breaks in the html to show the colored backgrounds. Notice the left and right divs are INSIDE the "main" div.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>one column with simple background CSS example with rows</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="one-background-with-rows-and-columns.css" media="screen">

</head>
<body>
<div id="wrapper">
<div id="header">
</div>

<div id="main">

<div id="left">
</div>

<div id="right">
</div>

</div>
<div id="footer">
</div>


</div>

</body>
</html>

Click here to see a live example.

 

Adjusting the header div

As you can see, the top of the background is covered up by what will be the main part of the page. To fix this, we'll give the "header" div a "height" value in the CSS of 150 pixels.

#header
{
width: 950px;
margin: 0px auto;
height: 150px;

}

Depending on how your background turns out, you will want to adjust the heights of all the rows. Just add the "height" tag to the CSS or try using margins. You might decide to have the navigation of your left column be higher or lower than the right column. You do this by adjusting the heights or margins of those divs individually.

This should give you the basics of creating a simple, single DIV, one background page that has both rows and columns on top. If you want a live example, look at the inner pages of my site www.anniemation.com.

The next type of site we'll try uses multiple backgrounds in different divs as found here: http://www.anniemation.com/cats/cats1.html

 

 

Go to next page

 

 

Tutorial: External Style Sheets

www.anniemation.com
ALL IMAGES AND CONTENT COPYRIGHT 2011, ANNIEMATION
ANNIEMATION IS A REGISTERED TRADEMARK