28
A WEB PRIMER
WEB DESIGNER’S TOOLBOX
Code Editors
Just as you have a word processor for writing or an illustration
program for drawing, you need a Web development program for
coding. A good code editor will:
» Organize and edit documents, providing suggestions where
needed.
» Preview documents without having to jump between mul-
tiple browsers.
» Download and upload documents as you work on them.
» Analyze and optimize your code.
Coda
Mac
panic.com/coda/
Coda is my program of choice whenever I edit code. Coda
(Panic So ware) includes integrated FTP, making uploading and
downloading  les a breeze. Its CSS editing tools allow you to
get straight at the code or to use a more designer-friendly visual
interface.
TopStyle
Windows
newsgator.com/individuals/topstyle
Although I generally recommend designing on a Mac, if you are
using a PC running Windows, TopStyle is similar to Coda.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
29
CSSEdit
Mac
macrabbit.com/cssedit/

a palette of colors that work well together but provide the spec-
trum needed. ColorJack and Adobe Kuler are Web apps that
allow you to put together a color palette, helping you choose
the best combinations based on color theory. You can then save
the results for use in common image editing so ware such as
Photoshop and Illustrator.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
31
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
32
A WEB PRIMER
WEB DESIGNER’S TOOLBOX
Typetester
typetester.org
Good typography on the Web seems like an oxymoron, but it’s
getting better. Typetester allows you to preview how di erent
font families will look at various sizes, weights, and styles. Just
choose from an extensive list of Web-safe fonts or from a list of
fonts installed on your computer, and the results are instantly
displayed underneath.
SUMO Paint
sumopaint.com
If you are a designer, you likely already have an image editor of
choice like Photoshop, Fireworks, or Illustrator.  ese applica-
tions can be costly, but free alternatives are available on the Web.
SUMO Paint allows you to create and edit layered bitmap images
in a familiar Photoshop-like interface. If you are strapped for
cash, it may just be what youare looking for. Although limited in
its feature set, it has all of the basic tools you would need to put
together simple Web graphics.

 les for output. I had to understand these things, not because
I was going to run one of those massive Koenig & Bauer print-
ing presses, but because I wanted to get the best results from my
designs in my selected medium. At the very least, even if you
never plan to touch the code yourself, understanding how CSS
works will make you a better Web designer.
Argument 2: CSS is too hard to learn. CSS was actually devel-
oped with designers in mind. Natural language terms are used
wherever possible to make it easy to understand and remember.
Argument 3: I’m a designer, damn it, not a programmer. CSS
is a style sheet language, not a programming language. What’s
the di erence? Style sheet languages are used to simply tell the
computer how the di erent objects in a document should be pre-
sented, using simple style rules that humans can easily understand
rather than logic-based functions. CSS is
used to describe how the content should
appear, not how it should work.
Myth 1:
CSS Is for Developers, Not Designers
WebDesignerWall
webdesignerwall.com
If you are looking for innovative Web design
ideas from designers, using CSS, take a look at
the Web Designer Wall.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
37
CSS is for Web Developers, Not Web Designers
CSS is a
style language
anyone can learn to

cannot do—like creating balanced column heights, although that
will be possible in the future— but the advantages of designing
with CSS far outweigh the advantages of table-based layout.  e
techniques that designers use today are vastly di erent from those
we used just a few years ago. As we’ve had a chance to explore the
capabilities of CSS, new ideas and new methods are constantly
being explored.
 ere is no better example of the versatility of CSS than the CSS
Zen Garden.  is simple site is a single Web page, which you can
download the HTML code for and create your own CSS design
solution. Over 200 designers have taken the challenge, with more
coming all the time. Each design is completely di erent from
the others, but all use the exact same HTML code as their basis.
With tables, which lock the structure directly into the HTML,
this versatility is lost.
Myth 2:
CSS Can’t Handle the Designs I Need
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
41
CSS Can’t Handle the Designs I NeedC ’t H dld e tl ht Dese ig I Ngggggggns I Nnnnss IIIIII NNNNNNNgggggg eeeeeeeeeeeeNNNhhhhhhhhhh DeDDDDDDHHHHHHHandannnndddddddHHHCSCCCCCCSSSSSSS CS CCCCCCSSS anaannnnnnCCCCCCCC ee eeeeeeeC eDDC DDDDD eeeeeeeeeegggggggggggg IIIIIIIII NNNNNNNNNNhhhhhhhhhhhhheeeeeeeee DDDDDDDDDDDDD iiiHHHHHHHHHHHH nnnnnnnddddddddddlllldddddCCCCCCCCCCSSSSSSSS CCCCCCCCCCCCC nnnnn’’’’’’’’tt
TRUTH
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
42
A WEB PRIMER
THE MYTHS OF CSS
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
43
CSS Zen Garden
csszengarden.com
CSS Zen Garden has a simple mission: Prove that CSS can

will create a usable but stripped-down design for IE6.  e design
still works just  ne; it just may not have all of the design bells
and whistles.
Myth 3:
CSS Has Too Many Browser Inconsistencies
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
45
CSS Still Has Too Many Browser Inconsistancies
6
7
ll Hlllllll HHHHaaaaaaaHHHHH s Tssss TooTTT o Moooooo y Bror r InI nsiMMMMMMManaaaanMMMMMMMMMMM y yyyyyyynn wsewwwwwwseeeeeetit cccccccoonnnnnnn isiiiiisssttaaaaaaaatttc ayya aaaaaaaaaannniiiiiiillllllllll aaaaaaaaaaaaasssssss ooooooo MMMMMMMMMMMMaaaaMMMMMMMMMM yyyyyyyyyyyyy wwwwwwwwwseeeeeeeeerrrrrrr nnnnnnncccccccconnnnnnnnnnnsssssssssiiiiiiiiiiiiisssstiiiisstn taty
77777777777777
6666666666666666666666666666666666666666666666666666666666666
TRUTH
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
In which the reader learns the syntax (how the language is put together),
semantics (how the language is understood), and vocabulary (the words
used in the language) that make up the grammar of CSS.
PART 2
49 Syntax
89 Semantics
123 Vocabulary
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CSS Grammar
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.