If you’ve been thinking of learning CSS but have become lost in the seemingly endless number of CSS tutorials that exist, you may want to read on. I’ve compiled my favorite CSS-related sites that specifically help the CSS newbie grasp the essential concepts. I cut my own CSS teeth by chewing on the information given by these sites, and I use most of the tools listed on a daily basis. I definitely don’t consider myself a CSS expert, but I would still be a confused newbie if it weren’t for the efforts of so many who have shared their knowledge and talents. It’s time to pass those on to you.

---

Keep This Handy

Bookmark this page at del.icio.us now so you can retrieve this list later, or pass it along to someone you know who might be struggling to learn CSS. Then bookmark and tag each of the sites listed below, using tags such as CSS, tutorials, resource, and howto, so you and others can benefit.

---

Use The Right Browser

The first thing you’ll need is the Firefox browser. If you intend to do any web site developing, you should be using Firefox as your main browser. You should test your sites in other browsers, of course, but Firefox is definitely the one to use during the development process. Why? It is very web standards compliant, and you can add plugins to help in the development process. If you don’t already have it on your computer, download and install it now.

---

CSS Cheat Sheet

Before you do anything else, open, save and print the following cheat sheet so you can have it handy at all times.

Added Bytes CSS Cheat Sheet (V2) is handy as a companion print out for those times when you just need a quick reminder.

---

CSS Debug Tools

Now, download some Firefox add-on tools that will make debugging CSS later on much easier.

Web Developer Toolbar is a must-have tool. It is useful for about 100 different reasons, but for the purposes of this post, you’ll be needing it mostly to live-edit the CSS of the current page. More on that later. For now, just add it to Firefox.

CSSViewer makes viewing the CSS properties of any element on a page easy and clear. Add it to Firefox now. Note that once you install it, you’ll need to click on View / Toolbars / Customize in your browser, find the CSSView icon in the list, and drag/drop it to your toolbar, so you’ll have one-click access to it at all times.

CSS Debug Toggle Bookmarklet lets you view the entire structure of a page with one click. Drag/drop the bookmarklet to your bookmarks toolbar. Note that there are several bookmarklet links on that page. Look for the CSS Debug Toggle link in the Second Update: section.

---

CSS Tutorials

Now that you’ve printed out the CSS Cheat Sheet and have your CSS Debug Tools at hand, you’re ready to start learning. I recommend using the following tutorials in the order listed.

W3Schools CSS Introduction is the classic tutorial that everyone should start with, and bookmark for future reference. It’s great for getting the high-level aspects under your belt, but the next two are better for hands-on learning, in my opinion.

Selectutorial’s CSS Selectors tutorial is fabulous for visually conceptualizing what happens as you complete each step.

CSS Basics is the one reference I’ve found that is easiest to understand. It also comes with a .pdf you can download as well as a version that is printable.

---

Understanding The CSS Box Model

Brainjar’s explanation makes the box model concept understandable.

The 3D CSS Box Model and the Interactive 3D CSS Box Model Demo are handy tools to visually understand CSS’s box model.

---

CSS Layouts: Templates and Generators

At this point, you’re ready to start playing on your own, so now’s the time to introduce you to CSS layout templates and CSS layout generators. One of the best ways to learn CSS is to look at layouts and study the code for them. Here are my favorite layouts.

168 CSS Layouts give you plenty to choose from. Download a few and study the code.

Another option is to use a generator to help you create layouts. Generators give you the flexibility to design your layout your way, fairly easily. Once you’ve downloaded the resulting layout, study the code. Here are the two generators I like best.

CSS Creator Css Layout Generator is quick and easy to use (especially if you actually read the instructions..hint, hint).

YAML Builder is a generator that I’ve already reviewed here.

---

Debugging CSS

I’ve already covered the tools you’ll need to debug CSS early on in this post, but I wanted to link to a few helpful debug tutorials that will help you out when you are trying to figure out why your code isn’t doing what you think it should be doing.

Duke Listens – Debugging CSS helps you understand how to best use the Firefox Web Developer add-on you downloaded earlier (limiting the discussion to just a couple of Web Developer’s many features).

Debugging CSS, The Easy Way breaks the debugging process down so that you can track down exactly where the problem lies – which is the first step in figuring out what is wrong.

Debugging CSS describes the debugging process in easy-to-comprehend steps.

---

CSS, Different Browsers and IE especially

Obviously, there are different browsers in the world, so you’ll need to test your pages in at least the most popular. You can simply install each browser on your computer if you’d like, and test that way, or you can use a service to do the testing for you. I recommend Browsershots for this. Although you’ll see the option to check your site in lots of different browsers and versions, I don’t recommend checking too many, as it will take a long time, and it just isn’t worth it. I usually check the Windows versions of Firefox 2 and any versions above, IE 6 and any versions above, and the latest versions of Opera and Safari, plus the latest version of Safari for Mac.

Finally, it’s time to tackle the elephant in the room – IE. IE doesn’t play by the same rules as most browsers, so you’ll often be tripping over IE CSS problems. Luckily, others have already encountered the problems, and have written about how to deal with them. A few good resources are below.

Explorer Exposed lists the most common problems with fixes and hacks to deal with them.

WebCredible’s IE CSS Issues lists 5 of the most common problems, with solutions to each.

IE CSS Bug Fixes lists a few fixes for problems you may run across.

Debugging CSS in Internet Explorer has some problem solving tips.

IE CSS Bugs That’ll Get You Every Time gives more tips for dealing with IE issues.

And finally, How To Create an IE Only Stylesheet shows how to do just that.

That’s it! Good luck on your quest to master CSS.

 
 

Find this post ueseful? Consider adding to my coffee fund...

Help replenish my caffeine stores

Your Email Address:

***
If you are the first to "discover" any of my posts in StumbleUpon, one of the following categories would probably be the most appropriate to place it into. You don't have to choose one of these, of course, but based on what I usually write about, there's a good chance any of my posts will fall into one of these categories.

Computers * Computer Graphics * Computer Hardware * Computer Security * Databases * Internet * Internet Tools * Linux/Unix * Web development * Weblogs(Blogs) * Windows