Great Design

Welcome to Great Design. This website will look at the best designs on the internet. As well as tutorials teaching you how to produce amazing designs and get good looking results.

How To Build A Basic CSS Webpage (Part 1)

Dec 5, 2007


Cascading Style Sheets are really cool. They give a lot of control over a website and as a result you can make amazing websites with them. CSS was introduced as a way fro developers to have better control over a websites layout. Currently the HTML 4 that is used doesn't have controls that are good enough. CSS has been developed to combat this.

This first post is going to explain the basic terms and what is going to be set out. Tomorrows post will include building the page possible the day after will include more advance features. It is really easy to do this. All you will need is a text editor and a web browser.

The Layout

Any good website is laid out on paper. This is usually so you know a reference on how to make things work and how they will be laid out. It is really important that you know what you want. Otherwise your website my not look as good as it could be.

The layout we are aiming for is going to look some thing like this.

Each div area is a small defined section that has its own properties. This type of website is also called referred to as blocks. Each part (all 6 sections) will be specified its location, padding, margins, colour, and possibly size. Content can then be added to this sections.

The Terms

If you are new to CSS there are a couple of terms that you may not have heard of.

"Div" means division. A div can only appear once. You could write them more than once but you may get errors.

"Class" you can also style some text in the style sheet but use a class tag. Class tags can appear more than once and are more commonly used for text.

Style Sheet

Quite a big part of CSS is the Style Sheet. A style sheet is referenced in header head sections. You insert the code into this sheet and then reference it in you main part of the HTML. The reason of this is that it cuts on code. You can remove a lot of the same code by having one class and referencing it.


Sorry this is just a quick post. But I am short on time. Tommorow I will introduce how to build a page out of CSS. It is not very hard to do. You should get the hang of it in no time.