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

Notes:

When you use an entry of 0 you can drop the unit of measure since zero is zero - right?
We show the unit 'px' throughout just for consistency.
Items inside [ ] describe the scope and MUST NOT BE INCLUDED in the CSS definition. Values may be ALL, V - left and right Vertical sides. H - top and bottom Horizontals. B - bottom, T - Top, L - Left R - right.
CSS allows 1, 2 (H V), 3 (T V B) and 4 (T R B L) 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) or CSS color name, `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) `font-variant`: (normal \| small-caps) `font-weight`: (normal \| bold \| bolder \| lighter \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900) `font-size`: 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 `line-height`: 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 `font-family`: 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". Examples: 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.