My Development With CSS

How do I learn css? I see the question all the time from developers who have become convinced that css has many benefits and that developing sites with a css layout has many advantages over building a site with a table based layout. To help with the learning curve I wanted to share my own development growth with css.

My css beginnings actually started in a class on html. Not a very high intensive class, but rather a continuing education class at the University of Colorado. In truth, though I was able to complete the minimal coursework, at the end of the 4 weeks my knowledge consisted of knowing the basic css syntax ( selector {property: value} ) along with a few simple properties like font-size and color.

Not too long after I began building a site for a friend with the idea of become a professional web designer. That first site was built with a combination of Photoshop, Fireworks, and DreamWeaver complete with a table based layout and far more images than were needed. Shortly after finishing I realized there had to be a better way to build a site and that the way was hand coding and using css.

The hand coding I could already do. The choice of Dreamweaver on that first site was thinking that all web designers used it, but to learn how to really use css I grabbed a couple of books which is my usual first step when learning anything new. At the time Eric Meyer was the person writing about css and the two books I read were Eric Meyer on CSS and Cascading Style Sheets 2.0 Programmer’s Reference. I highly recommend both books as well as the others Eric has written.

I’m a firm believer in learning from a combination of theory and experience and think a little reading can go a long way in learning why things work instead of just knowing that they can work. For about a week wherever I was one of those two books was with me while I read and reread to understand how css worked better.

As it happened I had another site to build as soon as I finished the books and was able to put that theory into practice. The presentation was easy enough to do in css though I suspect I left a little html presentation in that first site. The difficulty was in the layout. Fortunately the design wasn’t too complicated and the site was built mainly using absolute position. Not the best way to build a site, but it was the easiest for me to wrap my head around at the time.

While that site got built it was clear there was more learning to do. The next phase of my learning involved viewing the source code of as many sites as I could find that were created in css and seeing how the pages were put together. Learning by studying the code of others is an excellent way to learn. The more code you see the easier it becomes to read and the easier it becomes to write.

About this same time, in the days before Firefox, I discover the Mozilla browser and started adding developer extensions that could help provide information how a page was put together. If you’re developing sites with IE stop and switch to Firefox. You can surf with any browser you want, but if you develop with Firefox and code to standards and then tweak a little for IE you’ll have a much easier time getting sites that work in both than if you develop the other way around.

The next phase was really about practice and active development. The theory is great, but there’s no substitute for doing if you want to be able to actually do something. With each new site there was something that didn’t work like it was supposed to and there were many late nights searching for a fix. Often those nights were frustrating, but not only did I learn something new once I found the solution, but I also learned how valuable search engines were in a developers life. Chances are any problem you’re having someone else has had before and has also written about both the problem and solution. It’s just waiting somewhere for you to find it. You can also stop by your favorite webmaster forum and ask. Most of the time you’ll have your answer in an hour or two. Before asking though try to figure it out on your own. It will take longer, but solving the problem yourself is often worth the extra time.

Many sites and many late nights later and developing a site in css is more about deciding which way is better for that particular site than wondering how I’m going to code something. The more you work with css and the more you can understand why something works instead of simply knowing that it works the easier it becomes to develop with css.

Often the problems have less to do with the css than they do with the html structure. CSS layouts will use a different html structure than table layouts. I’ve seen many people have problems with css not because of the css, but because they were still trying to structure their html the same way they would if they were using tables. CSS begins for me now when I design a site in Photoshop and think about how any graphic element will later be coded. Many times the answer to coding something is realizing that slight design modifications can save many hours of coding without much difference in the look of the site.

So why have I shared my own path to learning css? Mostly to let you know that I didn’t always know how, but through a combination theory and practice it has mostly become second nature. I also think the path I followed is one that can work for many people.

Reading to gain theory and understanding of basic principles along with some ideas of what will make for good practice. Looking at source code to see how a site is put together and to compare that code with a graphical page. Practice, practice, and practice, making mistakes and solving problems along the way

Learning css isn’t necessarily difficult, but there will most likely be a few stumbling blocks along the way. Start with the simpler presentation css replacing html attributes and tags where you can. CSS layouts will take a little more time and there probably will be a few frustrating nights, but if you keep at working at it the layouts will get easier. Spend some time learning the theory, some time looking at other sites to understand how they were constructed and a whole lot of time developing your own sites using css.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.