CSS layout tutorial
This tutorial will show you how to use CSS to create page layouts by adding styles to a simple HTML page. The HTML and CSS used here is simple but flexible, and with the addition of different content and background images can be adapted to create all kinds of design.
Before you start on this tutorial, you should make sure that you have read through the HTML tutorial and CSS tutorial, which explain in more detail the concepts that we will be using to create our design.
The best way to understand what’s going on here is to download the html page and work along with the tutorial at each stage, so that you can see for yourself the effect of each change as we go along.
What you will need
To get started, you'll need the following files - right-click on each link and choose 'Save Link As...' or 'Save Target As...', and make sure that you save all files into the same folder.
layout1.html - this is the html file that our design will be applied to.
The other files are images which are linked to from the html page:
bumblebee.jpg
bumblebee2.jpg
bumblebee3.jpg
Once you've saved all the files, you're ready to start the tutorial!