CSS Lesson #3
"Common CSS Properties"
This is a list of what properties are used most often in CSS, broken into sections for your convienience. Most of these are CSS1 properties, which means that they're supposed to be supported by all modern browsers, but some are CSS2 properties. I've never had a problem using any of the properties below in Firefox or Netscape, however.

There are far more properties than what I list here but I don't use them. Both of the online reference sites I list in the "external links" section on the main tutorial page do list these properties.

More about the value "inherit": this allows the child element to inherit the value of the parent element. If the parent doesn't have an associated value then either the default value is used or nothing happens if there is no default value for the property.

A note about a few of the single value declarations: margin, padding, and border-width (along with its variants) allow you to set the values in a shorthand way. The numbers work as follows: top, right, bottom, left. Example: padding:3px 2px 5px 4px;

Non-Text - Text - Pseudo-Classes - Miscellaneous

Non-Text: These properties alter the box model.

Shorthand Properties These combine multiple declaration values into a single declaration to save time and space.
Longhand Properties These are the full properties.
back to the top


Text: These properties alter the inline model.

Shorthand Properties These combine multiple declaration values into a single declaration to save time and space.
Longhand Properties These are the full properties.
back to the top


Pseudo-Classes: These allow for the styling of things that technically don't appear in the document. Only the anchor tag <a> can use the ones below.
These should be declared in the order shown below in your stylesheet. A good mnemonic device to help you remember the order (courtesy of The Zen of CSS Design) is: Lord Vader's Handle's Anakin. Properties you can use with these pseudo-classes are: color, background (color or image), and just about any property listed in the "text" section. You can have multiple link colors on a single page but you have to specify each grouping or the later declarations will override the earlier ones. This can be done by either using an ID or a class to point to the element or a selector such as "p". Example: #nav a:link {color:pink;} or a.nav:link {color:pink;} or p a:link {color:pink;}.


back to the top


Miscellaneous: Properties that don't alter the box or inline models.

back to the top

This page was last updated on: