Create a WebSite with CSS - Part I

We are now going to create our first website with css, so open up your code editor and let's write some code.

In this tutorial I presume that you have read the HTML Tutorial and I will not explain every tag.

If you don't understand something please email me at emil.hossu [at] gmail [dot] com

You can download a zip archive of the website that we will create here.

- as you can see on line 4 we have link to an external CSS file, href="css/style.css". The link is "css/style.css" because the file is in a subdirectory called css.

TIPS: I recommend that you create a directory structure for your website because this will be good for your website search engine optimization (SEO).

- on line 7 we have a

tag that is going to center our website.

- on line 8 we have a tag for the page width, that is 950px, as you can see below.

- from line 10 to 14 is the header.

- on line 14 is a comment. CSS comments start's with "/*" and end's with "*/".


- line 16 -  position property - allow you to position an element. In our case it has the value relative, which position a HTML Element relative to its normal position. This property has three more values: static which is default, fixed and absolute. The fixed value makes the element positioned relative to the browser window, a good example is the fixed background you can see on some pages. Absolute value makes the HTML element positioned relative to the first parent element that has a position other than static.


- for the rest of the lines, I think, you understand what they do.


- on line 12 is the logo, which is set as a background image with css.

- line 26 and 27 - margin property - this property clears an area a round an element, outside the border. This property can be: margin-bottom, margin-left, margin-right, margin-top.


- line 30 - we set the logo image with the background property. For our background property, we have the following values: url("path to the image"); position which is upper left corner (0 0), in our case, and the "no-repeat" value.

- to create the line with round corners I used four

tags. One that includes all div tag, two div tags for corners and one for the middle.

- I've made this drawing so you can understand better.

All images were built with GIMP programme, for more information about GIMP visit Web Building Tools in the left menu.

- the blue background corresponds to class "line";

- the left green "CORNER" corresponds to class "left_line";

- the middle purple "MIDDLE" corresponds to class "middle_line";

- the right green "CORNER" corresponds to class "right_line";

- line 111 - padding property - does the same thing as the margin property but inside the border of the HTML element.