mail us  |  mail this page

products  |  company  |  support  |  training  |  contact us

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:

  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)
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.

Tech

tech home
audio stuff
web stuff
dom stuff

css stuff
language stuff
regex stuff
rfc stuff


protocol stuff
cable stuff
lan wiring
rs232 wiring
dec > hex > bin
character sets
data rate stuff
mechanical stuff
howto stuff
survival stuff
wireless stuff
pc stuff
electronic stuff
tech links
open guides
RSS Feed Icon RSS Feed

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

web zytrax.com

Share Page

share page via facebook tweet this page submit page to stumbleupon submit page to reddit.com

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 (WHATWG)
HTML4 vs HTML5
HTML5 Reference
W3C Page Validator
W3C DOCTYPE

CSS Stuff

W3C CSS1
W3C CSS2.1

DOM Stuff

W3C DOM
W3C DOM Events
Gecko DOM
MSIE DOM

Usability/Access

usability.gov
W3C -WAI
Web Style Guide
WebAim.org

Jolly Useful

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

Our Stuff

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

Javascript

ECMA-262

Display full width page Full width page

Print this page Print this page

SPF Record Conformant Domain Logo

Copyright © 1994 - 2014 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
Hosted by super.net.sg
web-master at zytrax
Page modified: September 22 2013.