Taking The Plunge: Learning CSS

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...



Your Email Address :



Be Sociable, Share!

bookmark digg this reddit this stumble this bookmark bookmark bookmark bookmark fave this furl this fark this sphinn this tweet this bookmark mixx this
tabs-top


19 Comments »

  1. garrow Says:

    I can’t believe you left out firebug!

    getfirebug.com

    The absolute best debugging plugin for firefox.
    It has almost entirely replaced webdev toolbar for me.

    Inspect elements, edit html and CSS on the fly trace XHR requests and page resources. Measure layouts and SEE margins and padding on all elements live.

    It rocks.

    comment-bottom
  2. WebChicklet Says:

    Firebug does rock, I agree. But I did leave it out on purpose, because I thought it was just a little too “much” for a beginner. But it is great, I use it too, and would be a recommendation for the next step up.

    comment-bottom
  3. This might be enough to get me off of my butt and redo my restaurant review blog, thegrubhound.com…it really needs help badly.

    comment-bottom
  4. WebChicklet Says:

    Adam, any excuse to redesign a site is a good one…if only for the freshness factor. Have fun!

    comment-bottom
  5. Wayne Says:

    I think you’re right there. Keeping it fresh does help with your curbside appeal, if I can call it that.

    Great list here! Thanks much, CSS is relatively new to me, so any help I can get, I’m going to like. Cheers!

    comment-bottom
  6. very true ;) css rules the net

    comment-bottom
  7. Puke Says:

    Thanks! Finally I will start doing something with my hosting, which has been sitting around for years!

    comment-bottom
  8. vikas Says:

    Very nice tutorial …. css used to be my nightmare now I think by using these thing I would be able to use css better

    comment-bottom
  9. dallas Says:

    This is the best organized and laid out explanation of css. I am a newbie in this area trying to learn it so that my world of warcraft guild website can look professional. Going from Html 1.0 (10+years ago) to this is very hard.

    comment-bottom
  10. Linda Says:

    OMG, where was this when I was trying to learn CSS three months ago. This is exactly what I needed. The Selectutorial is perfect, FYI. Once I finally figured out that, in essence, everything is essentially nested in everything else…well, clarity!

    Thanks!

    comment-bottom
  11. Craig Says:

    1. Firebug is even more appropriate for someone starting out than for an advanced user. There is no better way to see what css is making something work.. or break.

    2. Put some line-height on your h2 up there.. geez :)

    comment-bottom
  12. Dan Foltz Says:

    Your CSS learning appealed to me when I found it via the Google Search. However, when I tried to get all of the Firefox Add-Ons I received the folowing:
    1. Web Developer Toolbar – Made FF unuasable. I need to re-download and re-install.
    2. CSSViewer – Not compatible with FF 3.5.3
    3. CSS Debug Toggle Bookmark – I followed the link provided – I created the required Account on that site) – Logged in and could not find the Add-On
    So at this point I am like Mighty Casey … I have struck-out. There is no joy in Mudville. Perhaps you can shed some light on my problems. I thank you,
    Dan

    comment-bottom
  13. Will Says:

    This is awesome, thank you for compiling this information. I started to dig into PHP but found that my lack of CSS skills was going to make things difficult so the search began. Thanks to your site, I can get a good understanding of CSS without spending a fortune on books that are likely above my head. :)

    comment-bottom

Trackbacks

  1. links for 2008-07-15 « My Weblog
  2. Wednesday’s Weekly Reader
  3. Learn Anything, Be Anything, For Free | WebChicklet | Just a Geek Girl
  4. an embedded longing for the primeval savannah
  5. websistaz ¦ the blog for female web designers» Getting Started with CSS
  6. Web Development Links | WDTalk

RSS feed for comments on this post. TrackBack URL

Leave a comment