Theater For The Future

The Art in the Business of Theater – Collaboration Tools and Technology and the Storefront Theater Movement
Subscribe

Learn Web Design for free by the Seat of your Pants: CSS 101

December 06, 2008 By: Nick Keenan Category: productivity, Tools

I just wrote this mini-manual for a client. And it occurred to me as I wrote this that for some time I’ve wanted to collect this info for a number of friends and, well, spouse of mine who are interested in enriching their knowledge of web design and share it with them.

So you know what? I’m going to post it for you too, in case you really want to trick out your WordPress/Typepad/whathaveyou Template or pick up a really useful side skill in your free time.

It’s step one to learning really great, simple web design in the modern era: Cascading Style Sheets.

CSS – Styles & Layout

Free Resources to help you Learn by Doing –
FIREFOX WEB DEVELOPER PLUGIN
Adds a toolbar menu to firefox that (with CMD-SHIFT-Y) will help you identify and locate specific CSS classes and styles to help troubleshoot layout issues and changes. It does some other really cool stuff too.

CASCADING STYLE SHEETS TUTORIAL
An excellent online guide. Especially useful – check out the cascading order so you can see which style rules overrule others.

CSS PLAYGROUND
You can only learn how something works by breaking it. So you can break someone else’s site, not your own.

CSS ZEN GARDEN
A truly inspirational – and open-code – collection of CSS skins that help you see both what is possible and how to achieve different design effects with CSS.

Books
My favorite guru for CSS is Eric Meyer, who wrote at least one indispensable book,
CSS: The Definitive Guide

and at least one inspirational book,
Eric Meyer on CSS: Mastering the Language of Web Design

TESTING
Especially with layout and justification, remember to test your work in at least:

IE 6 – Windows
IE 7 – Windows
Firefox – Windows
Firefox – Mac
Safari – Mac

Text styles and colors normally track safely, but things like padding, margins and floating get screwed up between browsers very easily. Be careful, and save a backup so you can revert if you make a mistake.
.

Be <b>.

Buy Me a Coffee?

Tags: , , ,

2 Comments to “Learn Web Design for free by the Seat of your Pants: CSS 101”


  1. Hurrah, that’s what I was looking for, what a data!
    present here at this blog, thanks admin of this
    web site.

    1
  2. Nice post. I was checking constantly this
    blog and I am impressed! Very helpful information particularly the
    last part :) I care for such info much. I was seeking this
    certain information for a very long time. Thank you and best of
    luck.

    2

1 Trackbacks/Pingbacks

  1. How to get the Right Website for Your Theater Company | Theater For The Future 22 04 09

Leave a Reply

  • Favorite Topics

  • Blogroll