This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
This page uses CSS to present the content in the best possible manner. If you can see this message, then CSS (or JavaScript) is not enabled in your browser, and the page will not appear as the designer intended.

The BODY - CSS

This page is fairly easy and straightforward: There is a headline, the navigation is on the left side, the main area with the content and a "footer" with the secondary navigation and the copyright information.

Lets start with the declarations for the body:

BODY {
      background-color : #FFFFFF;
      background-image: url(images/Pattern1.gif);
      background-repeat: repeat-y; 
      font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
      color : #000088;
      margin: 0px; 
      }

Here we tell the browser that the base-background color for this page is white (#FFFFFF).
We advise the browser to load the background-image "Pattern1.gif" that is located in the "images"-folder.
We also declare that this image shall be repeated only along the y-axis [North-South] and not tile over the total background.
Then we set the font-family as "Verdana" and offer a few alternatives should Verdana not be available on the visitor's computer, and declare the text-color of the page in dark blue (#000088), because it is always a good idea to declare a color with a background-color and vice versa.
The last item is to set the margins to zero. This design does not really call for it, but it is useful in other layouts, and so good to be acquainted with.

Back to the Top

Ok, the BODY is set, and now we save that in a blank file, call it "Styles.css" and open a new document, where we call this stylesheet by linking it in the <head></head> the new document:

<link rel="stylesheet" href="Styles.css" type="text/css">

While in the <head></head>-section of the new document, apply the Netscape-resize-fix. A CSS-site without it causes Netscape to forget the styles the moment the browser window is resized. The Netscape-Resize-Fix is available in Dreamweaver and in the Materials-section.

If you have downloaded the image "Pattern1.gif" and put it in the "image"- folder, you should see the left-side pattern tiling down on an empty, white page. Click See an example of to see an example (with the styles in the <head> section).

Good! Now let's position the rest in Step 2