x

CSS Template Tutorials – Coding the Basics


The part of the tutorial will code the very basic things. It will use CSS to define the main holding div and style the text and links for the template. CSS code must be added between <style> and </style> in head section of webpage.

Setting up page properties

For the I use the dreamweaver input fields. For the rest of the coding process I usually type myself. To set up the properties open up your index.html file and click page properties button under the properties area at the bottom.

Once you click the button a window should appear with numerous options and input fields. The first thing to fill in is the font for the text on the design and the background. I used the following details for the tutorial template:

The design which the tutorial is for is going to have a fixed 800px width in the center of the page with a dark colour as a background. In the psd the middle content background isn’t 800px wide but that doesn’t really matter because we will be changing things when we code. For your template put the very background colour in the background colour field. You can get colours using the tool inside photoshop or use colour to html.

Setting up the basic page links

With the properties window still open click the links tab on the left. You can put the colours and setting which you want for the links on your webpage here. This is not the navigation link eg the top menu or right side menu on the tutorial design. This is a simple link such as the colour to html one just above. For the example I put the colour as #BA8F38 and hide underline on rollover.

Setting up the centered content wrapper div

This is a div which will hold the site contents and will be in the center of the page. To do this go to code mode in dreamweaver and change your body coding (pink is the css) to:

body {
  background-color: #26221B;
  text-align:center;
    margin:0;
}

For the css coding for the wrapper div put the following:

.wrapper {
background-color: #F4EDDF;  margin:0 auto;   width:800px;  text-align:left;
}

You can change the background colour and width to suit your design but for the tutorial example this is the parameters which will be used. If I make a design fixed width (a px width instead of %) I always make it 800px. A common screen resolution on old browsers is 800×600. If the width was greater than 800px then people would have to scroll which is very annoying.

You now need to create a div tag with the class wrapper. That means the div will take on the attributes defined for wrapper. To do so scroll down in the code mode and type between the <body> and </body> tags the following:

<div class="wrapper"></div>

Further explanation for those new to CSS and XHTML can be found below.

Very basic css explanation

.wrapper is the name for the attribute. So will be used for a wrapper attribute. The period in front of the name makes it a class. I will be doing all classes for the tutorial to make things easier.

The curly brackets open and close the definition for the attribute. You can definite what the wrapper class will be like by typing different lines of css attributes within the curly brackets.

Background color and margin and css attributes which you can define different values for. The value for the attribute is typed after a colon. Each attribute and value should be written on separate lines to make it easier to read and must have a semi colon at the end of it.

What makes the wrapper div centered?

The coding which is causing the wrapper div to be centered is a combinaton of (must have both) the margin:0 auto in the wrapper attributes and the text- align:center in the body coding.

What does the XHTML mean?

The snippet is the basic code for a div (basically a holder/container) with all the attributes assigned to the class wrapper. A basic div tag is written:

<div></div>

The <div> opens up the container and the

<div class="classname"></div>

You will notice, you don’t include the period before the name when you are typing it in XHTML. So .wrapper is just class="wrapper".

You should now have a basic understanding of the way XHTML and CSS works and should have set up your font styling and links for the template.You should also have a div tags which is set width and centered on the page. If you go to design mode you should see something like:

t4

It doesn’t look like much but you should have a think strip of colour 800px wide and centered at the top of the page. Now when you add content inside the wrapper div that colour will expand down the page as the content does.

Step 3- Slicing and Coding the Header

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.

x

Related CSS Tutorials

  • CSS Template Tutorial – Finishing Off

    September 16, 2007 / 34 Comments

    I will show you in this part how to finish the template off with a footer and just make our coding a little neater.

    Read
  • CSS Template Tutorial – Right column links

    September 16, 2007 / 3 Comments

    The tutorial is almost over and the template is almost finished. In this part I will show you how to create the simple navigation which is on the right column in the design preview.

    Read
  • CSS Template Tutorial – Coding post content

    September 16, 2007 / 7 Comments

    In this part we will code the article background and the comments button. For the design we are using for the tutorial the content on the left is a post in wordpress.

    Read

Comments

  1. benker Dhnesh says:

    its very nice and useful tutorial

  2. sai says:

    Very nice and useful, thanks.

  3. feng says:

    thank you!

  4. Ben Uecker says:

    Hello! Where can I find a PDF version of your tutorials? I won’t have internet access when I go through these. Thanks!

  5. Sey says:

    Its very easy to learn. Thank you.

  6. Dennis says:

    just what i needed… thank you very muh

  7. 321rentacar says:

    useful post. I found some answers for my website

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books