Learning CSS
July 12, 2004 | 
23 Comments
This post is for the folks who still might be new to CSS. I know there are lots of you out there! Never let it be said that I didn’t look out for y’all!
CSS can be tricky on the best days. There are many reasons for this, not the least of which is quirky browser support. It took me many months of trial and error, head banging and hair pulling to get the hang of CSS and frankly I still don’t have the handle it would take to call myself an expert or luminary.
Regardless of what some folks think (blush.)
I am often asked (and very late in responding, sorry) how best to go about learning CSS. While my own methods might not work for others (ahem — anyone else), I do think I can at the least point those looking to learn CSS in the right direction.
Before I get to that I want to say that I feel that a basic understanding of CSS is an absolute must for anyone wanting to get into design and development. I’m often surprised at how many folks I come across who’ve not taken the leap into CSS. It’s a staple of my everyday work and I don’t think it’s going anywhere soon.
It can be hard to grasp at first, but a basic understanding and a few good resources can get you quite a ways!
Learn the basics
I’d suggest starting with a very simple tutorial, like this one from Westciv or this one from the W3C.
This will give you the basic know-how to apply styles to your code, as well as the fundamentals to prepare you for more advanced CSS techniques later on. I made the mistake of diving right in without fully understanding how it all worked and it caused me problems down the road.
To be honest, I’m not sure I’ve got all the basics down myself. Too much trial and error. Then again — whatever works! Which brings me to my next point.
Learning CSS by doing CSS
This is how I learned what I know. I just dove in and began to experiment. I slowly tried out various techniques, adding them into my designs. I looked at the source files of various sites and techniques around at the time and began to tear them apart and reconstruct them for my own purposes. It’s always a learning experience to go through someone else’s code.
Just remember not to use anyone’s work without permission!
Even if you think you’ve got a handle on CSS it’s good to take a look behind the curtain of new techniques. I find I learn something new almost every-time.
There is a lot to know, so what I suggest is learning the fundamentals and not trying to keep the details in your mind. Let other’s do that by writing what they know into books or articles. When developing with CSS books and articles (hopefully with code samples) will be your best friend.
A few handy CSS resources
I’ve found it invaluable to have a few good resources around for when I come across a particular CSS problem. This seems to happen quite a bit! Here is a small, manageable list of some recommended CSS resources that will help you not only learning CSS, but when you forget something you’ve learned.
- West CIV’s CSS Tutorials. Some great stuff in here.
- Eric Meyer on CSS. This is a great book for beginners.
Tutorials. Some great stuff in here. - Cascading Style Sheets: The Definitive Guide A must-have CSS reference.
- The CSS Zen Garden. A great site for beginners and “pros” alike. Here you can really see the power of CSS as well as many different techniques.
- Designing With Web Standards. A great introduction to Web standards with lots of CSS goodness as well.
- Web Standards Solutions. This book is great because of all the hands-on, real world examples. I love books like this!
- Max Designs CSS Tutorials. These are great to help you understand some of the more esoteric rules of CSS.
Final Thoughts
CSS is still rather young, but it’s power and flexibility have been proven and will continue to be for years to come. It should be a staple of any Web designer’s skills. However, it’s not the end-all be-all of Web design.
At the end of the day it’s a tool — a great tool — and, as with any tool, there is more than just the understanding of the tool that’s important. You also need to know when, to use it and what to use it for.
CSS can do many things, but it can’t make your Web design successful all by itself. Just like Flash can’t make your site cool, or Javascript ensure user engagement.
If you’re learning how to design and build the Web — do learn CSS, but learn also the other fundimentals that will make you a better designer, developer or Web craftsman.
Filed under: Web Development
Comments
1. Dave said:
Good post today Keith.
Just FYI:
Broken Link: the luminary link to meyer is missing it’s “http://”.
Posted on July 12, 2004 02:03 PM | #
2. avianto said:
Thanks Keith. This article will be my recommended reading for those who ask about Learning CSS. Great!
Posted on July 12, 2004 02:28 PM | #
3. Craig C. said:
My best friend has decided to start her own blog, and she’s a beginner in CSS. After hearing me preach about it for a long time she finally had to take the plunge. I spent the better part of a day walking her through the basics via phone and instant messenger, and it really forced me to think about how to organize it all as a cohesive lesson plan. I’m not sure I did it right.
We’ve covered rule syntax, selectors, the box model, and got started on some properties and their acceptable values but that’s all rather daunting. In the next lesson we’ll start to get into positioning, floating and block vs. inline. Of course I’m sorely tempted to just say “RTFM” but we all know it’s so much easier with someone holding your hand.
Like most people, I learned CSS by viewing lots of source, reading lots of online articles and a few dead trees, and doing lots of tinkering on my own. I really think that’s the best way to learn. It just takes time, and it’s really hard to give someone a quick intro and expect them to retain it all and put it to use. But CSS at least provides instant gratification, since you can just type a line, save, reload, and see the outcome. It brought a grin to my face several times when I’d tell her to change some value and reload her test page and she’d say “ooo, that’s cool.”
I think I’ve converted another one.
Posted on July 12, 2004 03:39 PM | #
4. mattymcg said:
I’ve always like the w3schools.com intro tutorials for learning CSS. They start with the basics and have a “change the source on the left and hit reload to see the result on the right” split screen thing which I found invaluable not just for CSS but also the other technologies they have tutorials online for. And it’s free!
But you’re right, there’s nothing like getting your hands dirty and making your own zen garden entry or similar for flying up the learning curve.
Posted on July 12, 2004 03:46 PM | #
5. Ian Stewart said:
One thing I think should be pointed out to beginners is the danger of relying on MS Internet Explorer when learning the basics.
The bugs and omissions are bad enough, it gets worse when it forgives various fundamental mistakes, such as not specifying a width on a float, rendering things as intuitively expected. Unfortunately, CSS can be anything but intuitive, and these misunderstandings will almost certainly cause grief later.
-Ian
Posted on July 12, 2004 04:14 PM | #
6. Scrivs said:
Just like with programming you can’t learn it if you don’t do it. Write it, learn it, tweak it, learn it…ad nauseum. Go to the Vault study the Gallery sites’ sources and the resources section, code some more, learn to love the beauty that we call CSS.
Posted on July 12, 2004 04:33 PM | #
7. Scott said:
Well, I always test in Firefox or Opera when designing a layout or I am testing something. God we need IE7.
Posted on July 12, 2004 04:35 PM | #
8. James Prudente said:
Just found this page via lifehacks.com. It has a three column layout that is tested in seven browsers and fully commented describing the tweaks for each. great resource! check it out!
Posted on July 12, 2004 05:41 PM | #
9. Scott Johnson said:
Dude, I don’t know what you’ve got in that pipe of yours, but the last time I checked, CSS1 became a W3C Recommendation on December 17, 1996. In the whole timeline of the web, CSS is far from young. Perhaps your knowledge of CSS is young, but CSS itself is not. Perhaps you were referring to the recent trend towards widespread use of CSS? I can’t be certain, but either way, CSS is almost eight years old.
Posted on July 12, 2004 06:57 PM | #
10. Keith said:
Scott – Dude, I don’t want to argue semantics with you, but, yeah, I mean in terms of adoption. How long have you been using CSS? It has only been about 3-4 years all told for me – got a problem with that? ;)
I know many people who are new to CSS and even many “veterans” are in a similar boat. My use of CSS before about 2 1/2 years ago was pretty rudimentary. I don’t think that’s too uncommon. I mean the first CSS books didn’t start coming out until, what, 2000?
Therefore, I consider it “young”…
The purpose of this post was to help people who might be new to CSS get up to speed with it. There are more out there with an interest in getting up to speed with CSS than you may think.
Obviously you’re not one of those people, and that’s cool, but I don’t see how pointing out how “late”, at least in your view, people are to the party helps anyone.
The good news is, it doesn’t take that long to catch up and with the sorry state of CSS browser support (IE) anyone who wants to has time to get up to speed.
Thanks for the history lesson…but let’s stick to what matters.
Posted on July 12, 2004 07:58 PM | #
11. Tristan Harward said:
Great article, I’ll keep it in my bookmarks. I found this great tutorial googling on this very subject a few months ago, and it is still the best one I’ve seen:
Peter L. Kantor CSS tutorial
I especially enjoy the (CSS-based) design. It’s always nice to learn from a page that practices what it preaches.
Posted on July 12, 2004 11:55 PM | #
12. Jack said:
It interesting idea, i have this article in my bookmarks now. I use CSS in my design too.
Posted on July 13, 2004 03:29 AM | #
13. Matt said:
Just because it’s officially been around for 8 years or whatever, doesn’t mean it’s widely adopted, and used properly.
It’s important to understand “CSS Theory,” rather than just throwing some lines of CSS in, and calling yourself an expert.
This article is good, because it doesn’t dip into syntax quite yet - it just gives readers a “before picture,” allowing them to choose whatever learning path they would like.
Good article, and good links!
Posted on July 13, 2004 05:28 AM | #
14. Jeremy said:
The other piece that I’ve found indispensible in learning CSS is the Web Developer plug-in for Firefox, and more particularly, the ability to edit a page’s stylesheet(s) on the fly, so you can see the changes immediately. When I’m trying to learn a new technique, I’ll comment out the entire style sheet, and then add pieces back in to see narrow down the style sheet for the elements that are really relevant.
Posted on July 13, 2004 06:43 AM | #
15. grayrest said:
A nice quick overview. Now it’s time for mozilla evangelism!
The best tool for learning CSS is Jesse Rudderman’s Edit Styles bookmarklet. It basically gives you the stylesheet(s) of the current page but it’s editable and changes are reflected in the browser window immediately, allowing you to push and poke with someone else’s CSS without having to reload over and over.
Mozilla’s DOM Inspector (available as an install option, my overview) can also be helpful. You can click on an element and get all the CSS rules that apply to that element.
Posted on July 13, 2004 06:44 AM | #
16. nerdelite said:
I just wanted to extend my thanks for this post and the resources you provided therein. I’ve been spending some months now trying to cultivate a passable knowledge of web design and programming and a great deal of it has been focused on picking apart CSS. Up until now, a lot of the articles have seemed appropriate for black belts when I still can’t break a board with my hand. I’m looking forward to diving into all of this new…stuff.
Thanks again.
Posted on July 13, 2004 09:29 AM | #
17. Gabe said:
First of all, to add on to what Ian said, I think it’s best if you have a Gecko, KHTML, and Opera based browser to test in. If something renders a certain way in all three then you can be pretty sure that it’s correct per specification.
I also have to get in my jab at Scott. First of all, 8 years is not exactly old. Sure it’s old for an individual website, but it’s not old for an evolving technology. Secondly, you can’t consider a technology mature until it’s well-supported, which CSS is not. Sure, if you take IE out of the picture support is decent, but still incomplete, to say nothing of CSS 3. Speaking of which, the CSS3 spec isn’t even finalized yet. When it is, and the majority of browsers support it reasonably well then we can stop calling CSS young, and start calling it mature.
Posted on July 13, 2004 11:38 AM | #
18. Brian Behrend said:
I was actually a Computer Science/Web Development high school teacher this past year and tried to impart some basic CSS knowledge on them. It was an uphill battle to say the least. For HTML beginners, it was tough to add another set of syntax on top of what they were already barely grasping. Plus despite the fact we were learning to code in Dreamweaver, the majority of the kids knew how simple it was to click one or two buttons and have DW add a font tag for them. It’s not easy to explain the difference between the easy way and the right way. We focused on basic style sheet syntax and almost exclusively on CSS1, no positioning or anything else too complicated.
I think the main thing I was actually to get across to them was that there was a better way to do things. Showing them some of the web’s cooler CSS driven sites really encouraged them to learn more on their own if they were interested.
Posted on July 13, 2004 01:58 PM | #
19. Josh King said:
I’d like to add the CSS-Discuss List Wiki to the list of learning resources. It is a very comprehensive, though not always intuitive, CSS reference. I also refer individuals to the HTML Dog Tutorials, which are very readable.
I’d also like to add a tip onto what #15 grayrest said about the DOM Inspector. It shows the cascade order and lets you see computed style values. This can be a huge timesaver once you really get going with CSS.
For those familiar with IRC, there is a #css channel on Efnet dedicated to helping with CSS. Before you stop by, please read Why we won’t help you. Somedays some of us can be grouchy or impatient so please realize that we are sacrificing our free time to help you. If you stop by, feel free to /msg SkierX (me).
Posted on July 13, 2004 02:36 PM | #
20. Dan W said:
I think that list of resources is pretty good but for an all in one guide to HTML and CSS for the ground up the best all in one resource on the Web has got to be
HTML Dog
It saves you jumping around the web from article to article and gives you a good grounding all in one place. When you got the basics you can move on to the other articles you posted which are all very useful.
Posted on July 14, 2004 04:04 AM | #
21. Carla said:
I just wanted to add that the editCSS extension in Firefox is also a great tool. It gives the user live previews of stylesheets for whatever site you’re looking at. It’s fun to see how my changes affect the site I’m on… and through this, I’ve learned alot but not as much as I should. This posts seems like it’s been written just for me. :)
Posted on July 14, 2004 10:46 AM | #
22. Laura said:
The Web Design Reference Site has a large section on Cascading Style Sheets some folks have found useful for learning CSS.
Posted on July 16, 2004 12:51 PM | #
23. Dave Danson said:
I learned CSS at the start from the stylesheets section on a site called HTMLSource.
Once I had as much of the basics learnt as I could handle, I could move on to the more advanced ‘technique’ articles all over the web.
Posted on July 19, 2004 05:45 AM | #
Comments are now closed