CSS Tutorials From Beginner to Master

CSS - Cascading Style Sheets
CSS - Cascading Style Sheets


Cascading Style Sheets are a wonderful way to provide presentation for your website, as well as a handy way to separate the presentation of your website from it's content, although you probably already knew that because you've made it here! Learning a new code or language is always difficult – it is not only challenging to master the basics but to find more advanced concepts to master. My goal in creating this article is to create a guide to help you progress from the basics of the language to creating high-quality CSS websites. This article will show you several online tutorials that you can follow to progress from a CSS newb to a knowledgeable CSS expert.

Before reading these tutorials, you should make sure that you have the right tools to help you get a good grasp of the language. You really should be using a text editor with syntax highlighting to help you understand and browse your code, personally I use notepad++. If you are serious about learning CSS, don't use a WYSIWIG editor such as Dreamweaver or FrontPage. You will not learn to write code nearly as quickly because you will be relying on the program features – which is not what this tutorial is about. You might also want to utilize a CSS cheat sheet, which lists most of the elements and stylings so you have an easy reference in case you forget, my personal favourite is a cheat sheet from Leslie Franke. Most of all, make sure you take your time and have a thourough understanding of each of the concepts before you move on. This way you will be able to move from one tutorial to the next without having to go back and check how to do something. But, without further adue, the tutorials!

CSS Tutorial 1 - The Basics:

TUTORIAL HERE - This tutorial will give you a good idea of the basics of CSS, and provides interactive examples that can help you get a grasp of the language quickly. The examples are fun to mess with and will help you learn at the same time! Who would have thought!

CSS Tutorial 2 - Intermediate CSS:

TUTORIAL HERE - The htmldog intermediate CSS tutorial goes over things such as CSS shorthand to cut down the amount of code you write, CSS classes and ID's as well as background images to help you really leverage the language for your own benefit. These lessons basically help you add a bit more flair to your pages while also helping you cut down on code.

CSS Tutorial 3 - Navigation Lists:

TUTORIAL HERE - Websitetips provides you with a comprehensive guide to creating CSS navigation lists, from the basics of navigation lists all the way to the advanced stuff! Lists are very important in CSS design as they help you to stucture thing without using cumbersome tables.

CSS Tutorial 4 - Website Building Tutorial:

TUTORIAL HERE - This article shows you how to build a website template in CSS as opposed to HTML tables. Make sure you get a good grasp of this one! You can find help for this tutorial in the comment section of the site or you can Google your questions. As a last resort, post in the comments section here and I will see what I can do.

More Information:

This is where the CSS tutorials stop. You should now have a solid grasp of the langugage and should be confortable building a CSS website. The internet is a great place to extend your knowledge, and there are many web design sites that will show you techniques to further improve your sites. Some of my daily read include nettuts, webmonkey, alistapart and 436bereastreet. There will be a high chance that your websites will display nicely in one web browser and break in another. I wrote an article about Making websites look good in different browsers if you are having such a problem.

Since you should now be a competant CSS developer, you might be wondering what to do next. I often recommend JavaScript after learning CSS, because it adds a layer of functionality on top of your website, which can turn it from static (boring) to interactive (fun). I also recommend getting a good grasp of a graphics program such as the GIMP. Graphics programs are used to create background gradients, logos and the like for your website, which in turn makes it look far more professional.

Thanks for reading this list of tutorials. If it has helped you, I would love a comment. Similarly, if you are stuck don't be afraid to ask for help after consulting Google. Make sure to keep practicing and adding new strings to your bow – one day you might be running the next Facebook or Google!

More by this Author


No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.

    Click to Rate This Article