Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

A Short Guide To Writing Style Rules

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v4 i9
Originally Published: May 29, 2008

The truth of the matter is that writing a good Cascading Style Sheet for a web site requires making hundreds, if not thousands, of decisions as you go through the process of designing your site.

Design is always about making decisions, but one of the decisions I wanted to take out of the process is the order in which to write the CSS style rules. I wanted to come up with a consistent way to write my style rules so I could give a little order to what I was doing.

Because of its flexibility there are many ways - some better than others - to write CSS. If you look through other people's CSS, you'll find designers using idiosyncratic methods of writing style rules. No two people do it the same way and probably never will - or can.

My method is to group style properties in a logical way to help me remember the order in which I prefer to use them. These style properties which follow are certainly not all that CSS has to offer for bringing layout, color, and typography to your web pages. However, they are among the most commonly used.

Order Out Of Chaos

This group deals with the width and height of a box (all XHTML elements form a rectangular box).

  • width
  • min-width
  • max-width
  • height

This group deals with foreground color (font color), and background color, and using an image as a background to an (X)HTML element.

  • color
  • background

    These properties allow me to flow (or clear) text around an image or even hide an element (yes, there is a need for that sometimes). I could have added the position property to this group but I rarely use it.

    • float
    • clear
    • display
    • visibility

    These three properties set white space around elements. Very handy and among my favorites (because they're easy to understand).

    • padding
    • border
    • margin

    There are several properties dealing with styling lists. This one is among the most frequently used.

    • list-style-type

    All of these properties deal with styling font.

    • font-variant
    • font-weight
    • font-size
    • font-family

    These give you the ability to set text properties for your pages.

    • letter-spacing
    • word-spacing
    • line-height
    • text-align
    • text-indent
    • text-transform
    • text-decoration

    Two Examples

    Here are some ways I might use the above. If I wanted to style the body element (set some style rules for the entire page), I could do this:

    body
    {color:#fff;
    background:#000;
    font-size:62.5%;
    font-family:verdana, sans-serif;}

    This time I'm setting a style for a div tag that I've identified as "wrapper."

    div#wrapper
    {width:80%;
    color:white;
    background:navy;
    margin:0 auto;}

    As you can see I don't use every style property for every selector (in the above, body and div#wrapper are selectors).

    Again, the order of the style properties is not relevant, but I've gotten into a good habit of always using the order that I've devised. That way when I look at a long list of CSS style properties, I can keep track of what I'm looking at.

    And that's half the battle. Just being organized.