How I Learned CSS in 3 Months

I first launched my website in 2002. At that time, CSS was in its infancy and didn’t give me the kind of flexibility and control over the layout that I wanted. My site was constructed with tables and the results were exactly what I was looking for. I would revise my ImageReady files, save the images as GIFs or JPGs, export the table slices to html, and tweak the html in Dreamweaver.

At the beginning of each year, I update my website with new samples of my graphic design and art work. Updating a site that is constructed with tables is a daunting and time-consuming task. CSS has definitely improved since the early days, so I decided this year would be the year for me to learn it and implement it.

Steps I took to learn CSS

1. Use an actual project (my own website) as the learning vehicle. With an actual project, real-life obstacles arise that you have to figure out.
2. Research other websites. Look at sites that share content and goals with the one you are (re)designing. Be inspired by what you find! View the source coding.
3. Get some good reference books. So far, I’ve read 5 books that have been a big help.
   Head First Web Design, Ethan Watrall & Jeff Siarto (This was the first book I used; it helped me figure out the next step, which is the optimum width for your web pages.)HTML, XHTML & CSS : visual quickstart guide, by Elizabeth Castro (I’m a big fan of the visual quickstart guides!)CSS anthology : 101 essential tips, tricks & hacks, Rachel Andrew (This is a good focus on ways to approach common layout issues.)CSS: the missing manual, David Sawyer McFarland (Be prepared for some very dense material; jammed packed with information.)
   Head first HTML with CSS & XHTML, Elisabeth Freeman, Eric Freeman (Since I already knew html, this provided a nice finale. If you are unfamiliar with html, you might actually want to begin with this book.)
4. Choose the optimum width for your web pages. My site was originally sized for 800×600 screen resolution. Monitors have improved dramatically in the past few years, and now 1024×768 is pretty standard. In the Head First Web Design book, I discovered ready-made grids via CSS frameworks. One in particular, Blueprint, uses an optimized page width of 950 that fits nicely within a 1024×768 resolution, and that’s the size I chose.
5. Design (or redesign) the website. Pay special attention to the layout and navigation.
6. Use a basic template to begin CSS coding. I wanted my main content to be a fixed width, centered in the browser, so I selected the Dreamweaver html template named “1-column fixed, centered”. Since my site is in transition from tables to CSS, I selected html 4.0 transitional for my DocType.
7. Identify the common specifications. As with any design, there are common elements that share spex like font size & family, leading (line-height in CSS-land), heads, and subheads.
8. Organize the CSS file. There are many approaches to this, of course, so go with what makes the most sense to you. I looked at my WordPress blog’s CSS file for guidance and I used comments to divide the sections.
   Here’s my approach:
   —Start with the basic elements and put them at the top of the file:
   body, p, td, th, ol, ul, img ({ border: none } will get rid of that default border around images), h1-h6, as well as anchor tags, links, and pseudo classes (active, visited, hover).
   —Next, list the classes for specific styling.
   —The final section deals primarily with layout, containing the ids and navigation system.
9. Ask the experts. Inevitably, you’ll come across something that can’t be solved. There are many great websites out there to learn from. I’ve got 3 favorites:
   http://www.alistapart.com/
   http://www.smashingmagazine.com/
   http://www.thegridsystem.org/
10. Firefox plug-ins: Web Developer and Firebug. These plug-ins are easy to install. I first learned of Web Developer at the WordCamp Boston 2010. I use it to validate my CSS and html. But there’s a whole set of useful tools at your fingertips, such as edit CSS and Forms, resize browser window, and display information about images, IDs, classes, and Java. Firebug is my tool of choice for examining a web page to figure out a problem. It displays the web page in the upper section of the browser window, with the html and accompanying CSS below. If something isn’t working the way you expected, Firebug can help you identify the reason why: inherited styles, sequence of divs, naming conventions, etc.
11. Ask your friends. There is no substitute for great friends who are willing to help you out. So much of what I’ve learned as a designer and artist has come through simple sharing over a cup of coffee or a delightful meal. And it definitely is a bonus when a friend also happens to be a web guru!

Keeping it Simple

Part of my overall plan in transitioning to CSS was to keep the design simple. I wanted to be able to implement the CSS without getting caught up in elaborate design schemes that I was unprepared to execute. As my familiarity with CSS increases, I’ll revise and finesse the design.

How did you learn CSS?

Please share your CSS learning curve with us by providing a comment. Thanks so much!