x

CSS Template Tutorial – Finishing Off


Welcome to the final part of the tutorial. So far you should have picked up all the techniques and expertise to code a template. I will show you in this part how to finish the template off with a footer and just make our coding a little neater. I will also give a few tips for optimizing you website.

Coding the footer using CSS

I reckon you should probably be able to do this on your own by now but if not don’t worry. I will go through making the footer for the template. Basically its going to be within the wrapper div (holding the website content) and below the ending tags for the content. The attributes needed for our example will be width 100% and with a solid background colour.

.footer{
width:100%;
padding-top:15px;
padding-bottom:15px;
color:#fff;
text-align:center;
background:#4E4739;
}

All pretty self explanatory I would say. No need for anything complicated for this one. For the XHTML simple place the following just before the final div end tag (the one for wrapper div):

<div class="footer">Template by <a href="http://www.freecss.info">freecss.info</a></div>

So thats its for the CSS and XHTML. You are completed. Now time to just clean a couple things up.

CSS in external stylesheet

I believe you can do this in more than one way but I will just do it the way I am used to. Its quite simple. Press file then new and select CSS. Go to code mode of your current template and copy everything after <style type=”text/css”> and before </style>. Past this into the code mode for the CSS file. If want you can only copy it into notepad. Next save the file as style.css and in your tutorial folder.

You have now created your style sheet. Next thing to do is to remove from <style type=”text/css”> to </style> on your index.html. Also remove the tags themselves. The template now has no CSS defined. If you switch to design mode you will see what your website would look like with CSS turned off- Just as well CSS exists 🙂

Now you will need to link in your index.html to you style sheet. This is simple. Just add the following code you to your index.html’s head section (after title tag probably and before the </head> tag).

<link rel="stylesheet" type="text/css" href="style.css"/>

If you check in design mode you should now see your template with CSS defined.

Make sure everything validates

I always do this with my websites but sometimes it doesn’t really make much of a difference. Its best to have proper compliant code which validates. To check your CSS and HTML use w3c validator. You can choose various options to validate your code there. It will tell you any problems which you should be able to then go and fix.

After checking my coding I found no errors. That just comes after many years of coding. At first I would make something like 20 different errors on my first draft of coding so to speak. If you have problems with the way your website is displaying its often worth checking to see what the errors if any for your coding are. It can often show up spelling mistakes and typos.

Some search engine optimization tips

A few tips for coding templates. First off try to keep any text in your templates as html text. Try not to contain text in images. If you do this its best to use the image replacement technique to make it look as though the image is text. Its also best to use alt tags for you images that you do have. This helps with accessibility. Have your website title or keyword in your title tag. This is probably the biggest on page seo factor so use it!

You have reached the end

Well if I was to say it was great fun 🙂 I would be lying (deleted parts and had to rewrite them. Lots of stumbling blocks and time was spent on this tutorial so please if you find any problems with it post them here and I will try to sort them out. I hope you found the tutorial interesting and informative. You can hopefully learn something from what I have written.

Download Finished Template

Preview Finished Template

If you wish to request or ask me something please post them here. Thats all for now folks!

I Dont Need a Job

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 Tutorials – Coding the Basics

    July 20, 2008 / 8 Comments

    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

    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. bachtiar(indonesia) says:

    thx bro!! that’s great tutorial ! keep writing ..
    i’m will wait for your next article (great template tutorial)..
    especially css+ajax+javascript..:)

    terima kasih banyak (thank you very much)

  2. Rahul says:

    Thanks so much for your efforts to educate beginners like me. I was hugely benefited from your so helpful and detailed post.

    I am grateful to you for this post. This is the post after reading which I’ll finish my personal website completely complying with standards.

    Thanks man! I could not be happier 🙂

  3. Dalton says:

    Great tutorial!!! Thanks!! 😀

  4. Fabrizio says:

    Great! i’m new with css and i’ve understand more in this tutorial than in other sites mades for this.. good job and thank you again!

  5. Eugene says:

    looking forward for more information about this. thanks for sharing. Eugene

  6. macUels says:

    Thanks bro! It helps a lot.

  7. Abhilash says:

    Thanks a lot dude…i always had trouble wid using css..not anymore..Thanks a lotttt…keep the gud work going

  8. Nemo says:

    Bravo,bravisimo!!!! great job, thanks for sharing.

  9. ajeet says:

    really great tutorial….

  10. Tanha says:

    Thanks for the nice tutorial, wishing u the best.

    P.S:
    Merry Christmas and happy new YEAR

  11. Priss says:

    Great tutorial! Thanks for posting your tutorial!

  12. Gari says:

    Great job!!! Thanks a lot…

  13. hari says:

    Thanks for the tutorial.

  14. bob says:

    great tutorial. thank you

  15. Mehul says:

    Thank you very much for the tutorial!!

  16. mike says:

    Really helpfull tutorial, thanks

  17. sujan says:

    thank you

  18. khanhpv says:

    Greate tuts! Thanks & Best regards

  19. Silverback says:

    thanx for this great tutorial for me, as begginer in this technique it is very usefull, THX

  20. Conrad says:

    Thanks, I enjoyed reading and learning from your tutorial. Great work! It gave me the info and inside design info i was after.

    Keep writing!
    Conrad

  21. thank a lot the great tutorial

  22. Beavis says:

    Great tutorial! Do you have a PSD file before and after the slicing? I would like to give it to a couple of people I’m referring to your tutorial for practice.

    Thanks and look forward to more of your work!

  23. anamations says:

    Thanks for the insight ! You made this conversion a piece of cake!

  24. gavin says:

    thanks for the tutorial!

  25. no tags no related posts ?
    how can i read the first one ? 🙂

    • admin says:

      Good comment. I will add links to all other parts at the bottom of each when the new design is up. Also try to update some of the information.

  26. john says:

    great material, geat skills…
    thanks for sharing 😉

  27. Kris says:

    Thank you very much, great tutorial 🙂

  28. Rahman says:

    I was using table based design before. But reading this tutorial helped me alot understanding CSS and DIV. Thanks man. Cheers 🙂

  29. suman says:

    hai
    nob0dy explain like this. fantastic
    i searched seral sites, but thy hide many factors, but thi si sreally superb
    keep it up

  30. Willem says:

    Thanks alot for the tutorial! It gave me better understanding of using padding instead of margin

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