mail us  |  mail this page

contact us
training  | 
tech stuff  | 

Tech Stuff - W3C CSS2 Short Forms

This page describes the shortest way we can find for CSS definitions, saves all that 'border-left-width' stuff if you don't need it. On top of that many browsers don't accept a single definition - you need 'em all, which is a lot of typing.

Short Forms


  1. When you use an entry of 0 you can drop the unit of measure since zero is zero - right?.
  2. We show the unit 'px' throughout just for consistency.
  3. Items inside [ ] describe the scope and MUST NOT BE INCLUDED in the CSS definition. Values may be ALL - guess, V - left and right Vertical sides. H - top and bottom Horizontals. B - bottom, T - Top, L - Left R - right.
  4. CSS allows 1, 2, 3 and 4 values to be defined. Three values is a little confusing - well to us it is! But it does save some typing.
Forms Allowed Description
background:color image repeat attach h-pos v-pos
Since the keywords are all different you can leave out missing elements as long as they remain in order. Long forms are background-color: (#RRGGBB or #RGB) , backround-image: (url(path) | none), background-repeat: (repeat | repeat-x | repeat-y | no-repeat ), background-attachment: (scroll | fixed), background-position: h-pos v-pos where: h-pos (percent | unit | top | center | bottom) v-pos (percent | unit | left | center | right). If only h-pos given, v-pos assumes 50%. Cannot mix units or percentages with keywords.
font:style variant weight size[/height] family Since the keywords are all different you can leave out missing elements as long as they remain in order. Long forms are font-style:
(normal | italic |oblique)
(normal | small-caps)
(normal | bold | bolder | lighter | 100 | 200
| 300 | 400 | 500 | 600 | 700 | 800 | 900)
absolute - xx-small, x-small, small, medium,
          large, x-large, xx-large
| relative - larger, smaller 
| length which may be 
     absolute units - in, cm, mm, pt, pc
     relative units - em, ex, px
     percentage - relative to parent
number (font-size * number) 
| length which may be 
     absolute units - in, cm, mm, pt, pc
     relative units - em, ex, px
     percentage - relative to font-size
specific font name 
or generic name (serif, sans-serif, fantasy,
                 monospace, cursive, fantasy) 
multiple fonts allowed in order and separated
by commas, for example: 
Verdana, Helvetica, sans-serif. 
If font name contains spaces - enclose 
in quotes, for example: "Trebuchet MS".
font:bold 12pt "Times Roman",serif;
# next line is exactly the same
font: normal bold 12pt "Times Roman",serif;

# with line height
font: italic 12px/14px "Times Roman",serif;
border:1px solid red; [ALL]
Controls the width, style and color of the border in one shot. If you need different border widths or styles you need one of the other forms below. Long form 'border-width:', 'border-style:', 'border-color:' etc.
border-width:1px; [ALL]
border-width:1px 2px; [H V]
border-width:1px 2px 3px; [T V B]
border-width:1px 2px 2px 1px; [T R B L]
Controls the width of the element border. Can also take values 'thin | medium | thick'. Long form 'border-left-width:', 'border-right-width:' etc.
border-style:solid; [ALL]
border-style:solid dotted; [H V]
border-style:solid dotted double; [T V B]
border-style:solid dotted none double; [T R B L]
Controls the border style applied to the element. Can take the values 'none | solid | dotted | dashed | double | groove | ridge | inset | outset'. Long form 'border-style-left:', 'border-style-top:' etc.
border-color:red; [ALL]
border-color:red blue; [H V]
border-color:red blue cyan; [T V B]
border-color:red blue cyan silver; [T R B L]
Controls the border color applied to the element. Can take a standard color red | blue | silver | cyan | white | black (there are apparently 147 of them) or the #RGB form. Long form 'border-color-left:', 'border-color-top:' etc.
margin:1px; [ALL]
margin:1px 2px; [H V]
margin:1px 2px 3px; [T V B]
margin:1px 2px 2px 1px; [T R B L]
Margins add transparent space outside the element (mostly). Can also take a percentage or 'auto'. Long form 'margin-top:', 'margin-right:', 'margin-bottom:', 'margin-left:'.
padding:1px; [ALL]
padding:1px 2px; [H V]
padding:1px 2px 3px; [T V B]
padding:1px 2px 2px 1px; [T R B L]
Controls the amount of space between the border and the content. Can take a percentage. Long form 'padding-top:', 'padding-right:', 'padding-bottom:', 'padding-left:'.

Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.

Tech Stuff

If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as Firefox


Share Page

share page via facebook tweet this page submit page to stumbleupon submit page to

Page Features

Page comment feature Send to a friend feature print this page Decrease font size Increase font size

HTML Stuff

W3C HTML 4.01
HTML5 Reference
W3C Page Validator

CSS Stuff

W3C CSS2.1

DOM Stuff

W3C DOM Events
Gecko DOM

Web Style Guide

Jolly Useful

Peter-Paul Koch
A List Apart
Eric Meyer on CSS
DOCTYPE definitions

Our Stuff

Our DOM Pages
DOM User Guide
DOM Explorer
DOM Navigation
CSS Techniques
CSS Short Cuts
CSS overview
Oh Really!




CSS Technology SPF Record Conformant Domain
Copyright © 1994 - 2015 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
Hosted by
web-master at zytrax
Page modified: September 22 2013.