CSS - Learning the Easy Way

CSS is a means of taking the code that defines the style and layout of every web page on a site and placing it inside a single file. The CSS file is referenced by every html page on a site and saves the effort and complication of duplicating the style information on every page.

We cover this in the advantages of CSS, but if you are already convinced we'll move on to how it's done.

Learning CSS

It can take a day to work through a CSS tutorial. That is hard work. We've prepared some files that you can start using immediately. You'll become familiar with CSS when you start to modify the files for your own needs.

We've also written a couple of tutorial pages to help you understand what is going on, and allow you to be more creative with CSS.

Page layout with CSS

We've included an example of how to lay out pages with CSS. You can see the advantages of CSS for why this is a good idea. Our example describes how to generate a reliable 2 column layout like the following image:

Header - My title will go up here.
Left - for the navigation	Centrecontent - This is the new centre of the page.
Footer - This is the footer.

It's pretty straightforward to convert that to a 3 column layout as we've done for this site. See developing a CSS page layout for the guide to page layout.

Text layout with CSS

We've provided a sample style sheet which you can use on your own site. All you have to do is download a CSS file from this site and link it from the <head> section of your document. Find the guide to text layout in: styling text with CSS.

Our style sheet was a bit dull so we included a special css style called "lotsofstyles" which can make your text look like this:

Extreme CSS using the "lotsofstyles" style.

That's a pretty extreme use of CSS, but includes elements that are very useful. For example we've used borders and a background for the H2 sub headings on this site.

Next: Advantages of CSS