Learning CSS For Beginners

Paul Scrivens / 04.10.08 / no responses / CSS / Design

When you have been working with CSS for so long it becomes difficult to tell people the best methods for learning it because your methods aren’t always what works best for everyone. In a sense, writing CSS is a lot like writing actual backend code because there are many different syntaxes that can be applied to your solution. I definitely encountered my bumps and bruises and still seem to be going through some growing pains in my learning process (although I know a hell of a whole lot). The thing with me and CSS is that no matter how much I seem to know, I always feel like there is a better way to code it, which is probably true.

Do It Now

If you are just beginning to get into design you really shouldn’t look at learning CSS as an option or something to do down the road. Start learning it immediately. It is way beyond the fad stage and is a technology that allows you to reach the largest audience possible by being accessible (if done right) and customizable (different stylesheets for different formats). Combined with proper use of DOM scripting and you will find yourself with a website that provides an extremely powerful user experience.

If you are not learning CSS then you must be learning how to structure your site with tables and if you are doing so you are only making your life harder. These two design methods require two completely different modes of thinking. Start with CSS. I have a hunch it will work out for you.

Now don’t confuse using tables within a CSS page for tabular data and using them for full-blown layouts. Tables serve their purpose, but table-based layouts are usually accompanied with spacer gifs and other tricks that can slowdown any redesigns you have in mind.

Where to Begin

Before you attempt to learn CSS (or any technology for that matter) you should have an understanding of why it is important to learn. Here are some articles from the past that do a great job of explaining the benefits of CSS/Web Standards and why you should focus on that type of development over tables. These are some old school articles, but they are still extremely relevant today.

Now after reading all of that you should feel good about the decision you are making. It is now time to move on to the tutorials that will help you grasp the basics of CSS to get you going. As there are many sites that give you a basic beginner’s tutorial on CSS, there are two that I am going to recommend to help get your feet wet.

Westciv’s Hands On CSS Tutorial
HTMLDog’s CSS Beginner’s Guide (along with the Intermediate and Expert guides by my man Patrick)

If you are more of a sitdown by the fireplace type learner (and are not using a laptop and wireless connection to view these tutorials) then you should checkout these books:

Honestly though there isn’t much in those books that can’t be found online already. However, it’s always good to have a book to fall back on when you are tired of the computer screen.

Do As I Code

Ask any programmer the best way to learn programming and they will tell you is by doing it. The exact same goes for CSS. You can read all the tutorials you want, but until you experience the IE 3px bug for yourself then you just can’t grasp it. The great thing about coding and practicing is that you don’t even need a web server to do it. Open up your favorite text editor or WYSIWYG software, create an HTML file with the CSS embedded and start your browser. Voila! Instant coding environment.

Stretching Your Limits

Now that you have played around and grasped the basics of CSS there is always new territory to be explored. This is where the CSS Mania, CSS Remix and the CSS Zen Garden come in. Go look at the designs and find the ways that people are pushing design with CSS. View the source. Add the code to your own practices. Explore the resources and read about new coding concepts. If you are ready to take the next step in learning CSS make sure to checkout the resources linked to in 53 CSS techniques you couldn’t live without.

After doing all of this you should have a solid grasp of CSS. Essentially, to continue learning it’s a rinse, wash, repeat type of cycle. This just goes to show that once you start down the CSS path, there is no turning back. Keep at it and experiment without simply copying the code of others and you fill find that you are a CSS guru in no time at all.