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

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, V - left and right Vertical sides. H - top and bottom Horizontals. B - bottom, T - Top, L - Left R - right.
  4. 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.

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

Search

web zytrax.com

Share

share page via facebook tweet this page

Page

email us Send to a friend feature print this page Decrease font size Increase font size Display full width page

Resources

HTML Stuff

W3C HTML 4.01
HTML5 (WHATWG)
HTML4 vs HTML5
HTML5 Reference
W3C Page Validator
W3C DOCTYPE

CSS Stuff

W3C CSS2.1
W3C CSS2.2
Default Styles
CSS3 Selectors
CSS 3 Media Queries
CSS 3 Colors

DOM Stuff

W3C DOM
W3C DOM 3 Core
W3C 3 Events

Accessibility

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

Useful Stuff

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

Our Stuff

Our DOM Pages
DOM Navigation
Liquid Layout
CSS Short Cuts
CSS overview
CSS One Page

Javascript Stuff

ECMA-262

Site

CSS Technology SPF Record Conformant Domain
Copyright © 1994 - 2016 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
Hosted by super.net.sg
web-master at zytrax
Page modified: December 15 2015.