How To Build A Basic CSS Webpage (Part 2)

Hey

Lets get this ball rolling. This part of the tutorial will be used to make the wrapper div. Due to time I wanted to more. But i'm going to split it up into different parts. If you missed the introduction you can find it at part 1.

If you are ready to begin fire up your text editor and prepare to code.

Step 1) The first step is the basic construct of a website. Since this is only a bit of practice i'm not going to fiddle about with doc types or titles for a website. This is only going to be about pure CSS and HTML coding. I'm only going to use simple colours although you can fill these in at any time.

To start off add the following code to you text editor (known as editor or TE from here on). Its a basic layout for a blank HTML page, save it when you have done. To save, you can either save it as a .txt and then open it in a web browser or you can save it as a .html and then let your computer open it automatically. It doesn't matter. You will need to remove the spaces between the tags and add some in, blogger wasn't accepting the code directly for some strange reason.

< html
< head
< style
< /style >
< /head >
< body
< /body >
< /html >

The two points we are interested in are the style and the body tags. We first need to define a style for the wrapper. The wrapper will hold all of the other elements in place. This for ease of use will be centered. Size really doesn't matter but the width is going to be about 700px. A height will be added initially since there isn't any content.

Step 2) The wrapper needs to be defined we are going to use a div element with and id. An id is done through the hash (#) symbol and then an name. The specific coding is opened and closed with curly brackets {}. To start with the first element write the following code in the style tags.

#wrapper {
}

The wrapper is now defined and we can start to build it up.

Step 3) A size is needed, this is done through the height and width properties. Correct syntax for CSS includes two elements a property and then a value you will see in the next bit of text how this is done.

To specify a size add the following code, notice the colon and semi-colon. A height is added since there currently is no content. This can be removed later. If you view it you will not see anything, this is the next step.

#wrapper {
width:700px;
height:900px;
}

Step 4) White on white is a bit boring. Lets add some colour. To do this use the background value. A background can either be a colour (#123456) an image (url(location)) or both where th image is applied and then the background colour is behind it. I'm going to add a colour but you can use a background image hosted on the web if you want to. To add a background colour add the following code.

#wrapper {
width:700px;
height:900px;
background:#ffe2e2;
}

The basic style is complete we now need to place it some where on the page.

Step 5) All style element blocks is the div tags and then id. To place the style we have just created on the page we need to put this into the body of the html code. Add the following lines in the body.

< id="'wrapper'">
< /div>

Div stands for division and is needed. The id stands for the hash and then name we created. You can use class but this will be explained later. The name is obviously the name gave the style.

Step 6) It looks pretty good so far but we could just spruce it up a bit. The first job is the centre it. This is very simple. Surprisingly, there isn't specific code as you would imagine to set the div to the centre of the page. You have to use margins instead. To do this add the following code to the wrapper style.

#wrapper {
width:700px;
height:900px;
background:#ffe2e2;
margin:auto;
}

The auto margin puts the div into the centre of the page.

Step 7) One last thing before I wrap up. It looks a bit "weird" at the top of the page. But this can be change. Using the margin function again we can add in a value. Its very simple add in 50px or a value you chose the margin line. It looks as follows.

#wrapper {
width:700px;
height:900px;
background:#ffe2e2;
margin:50px auto;
}

For any pieces of code that use use to specify a size (mostly padding and margins) you work around clockwise. The first value is the top, the second value (not shown) is the right and so on. For example you could have something that looks like this.

margin: 10px 20px 5px 10px;

That piece of code means that there is a 10 pixel border on the top, 20 pixels on the right, 5 on the bottom and 10 on the right.

To conclude we have the start of a very basic layout. Next time we will fill out the header and main blocks and hopefully we will finish off. I wanted to get further than I have but I wanted to throughly explain everything.

Any questions please ask.