Hi! I’m Wahhab Baldwin, principal of Deep Web Works, a software development company. I am writing this site because even though I read several books on CSS when I was first learning it, there were important things I needed to be able to do that just weren’t made clear in those books, and I wanted to make it easier for you than it was for me. This site is a work in progress, so check back to find new lessons. You can contact me about projects or this tutorial, although I can’t promise to respond to every question.
What makes this practical CSS? First of all, most tutorials on CSS start with features of CSS and explain them. This tutorial starts with what you want to accomplish and step by step shows you how to do it. Second, it is visual. You can see what the CSS does. And third, it is interactive. It lets you try things out; it invites you to test your understanding, and it lets you post questions and comments.
I assume that you are at least a little bit familiar with HTML. I won’t be explaining HTML here, but I also only use very simple HTML, so don’t be put off if you are a complete newbie.
I have divided the contents into three categories.
Content that looks like this is essential. If you are brand new to CSS, read this content and ignore the rest of it for now. Later, when you have a bit more experience, you can come back and pick up the rest.
Content that looks like this is more advanced. If you are an intermediate CSS user, skim the essential content and read this, and your skills will improve. Beginners are invited to skip these sections for now.
Content that looks like this holds quirks, browser-specific issues, and fiddly details. If you are an experienced CSS user, you may find the answers to your issues here.
Let’s get started! Here’s a brief overview of CSS: What and Why?