• Background images start within the margin and border, outside of the padding
background: <background-color> <background-image> <background-repeat> <background-attachment> <background-position>;
background-color: [transparent, <color>];   /* default: transparent */
background-image: [none, url(<file>)];
background-repeat: [repeat, repeat-x, repeat-y, no-repeat];
background-attachment: [scroll, fixed];   /* default: scroll */
background-position: <x-percentage> <y-percentage> | <x-pos> <y-pos> | [top, center, bottom] [left, center, right];
  • <x>px <y>px  - Places the top-left of the bg image at position (x, y) relative to the top-left of the HTML element
  • left top | 0% 0%  - Places the top-left of the bg image at the top-left of the HTML element
  • 50% 50%  - Places the middle of the bg image in the middle of the HTML element
  • right bottom | 100% 100% - Places the bottom-right of the bg image at the bottom-right of the HTML element


padding: [auto, <length>, <%>]; 
  • padding, padding-top, padding-left, padding-bottom, padding-right
margin: [auto, <length>, <%>]; 
  • margin, margin-top, margin-left, margin-bottom, margin-right
border: <width> <style> <color>; 
  • border, border-left, border-right, border-top, border-bottom
border-width: [thin, medium, thick, <length>];
border-style: <style>;
border-color: [<keyword>, <rgb-color>];
  • border-width, border-left-width, border-right-width, border-top-width, border-bottom-width
  • border-style, border-left-style, border-right-style, border-top-style, border-bottom-style
  • Style: none, solid, double, groove, ridge, inset, outset, dotted, dashed
  • border-color, border-left-color, border-right-color, border-top-color, border-bottom-color
Shorthand notation
<property>: <top> <right> <bottom> <left>;   /* 4   TRBL */ 
<property>: <top> <left-right> <bottom>;     /* 3 */
<property>: <top-bottom> <left-right>;       /* 2 */
<property>: <top-bottom-left-right>;         /* 1 */


color: [<keyword>, <rgb-color>];
  • Keyword: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
  • RGB colors:
  • #rrggbb (0..f)
  • #rgb (0..f) (converted to #rrggbb)
  • rgb(x,x,x) (0..255)
  • rgb(y%,y%,y%) (0.0..100.0)


font: [weight] [style] [variant] size/lineheight family;
font-family: font-name [, font-name]*; 
font-weight: [normal, bold]; 
font-style: [normal, italic];
font-variant: [normal, small-caps];
font-size: [<size>, <length>, <percentage>]; 
  • absolute size: xx-small, x-small, small, medium, large, x-large, xx-large
  • relative size: larger, smaller
  • relative length
  • px: pixels, relative to the canvas resolution
  • Applying a px font size to multiple ancestors of an element has no cumulative effect
  • Applying a px font size overrides the cumulative effect of any em or % font sizes that were set  for ancestor elements
  • Text specified with px won't scale in IE6 when the user changes the text-size, because of a bug in IE6; there's no option for uniformly zooming the entire page in IE6
  • em: ems, the height of the element's font, or for a font, the height of the parent element's font
  • 1em is the same as 100%
  • By default, 1em is relative to the browser's default font size, which should be 16px for most browsers (this varies if the browser's text size is changed)
  • Applying an em font size to multiple ancestors of an element has a cumulative effect
  • If em is used site-wide, avoid specifying any font size other than 100% or 1em for the ancestors of text elements, as it would change the relative scaling of text in all child elements (this may be useful in some cases, as it provides an easy way to scale a portion of a page)
  • Only specify a font size other than 1em for text elements, and only then if all descendants of the element have the same text size as the text element, and if all of the descendants can inherit the font size of the text element
  • Avoid re-using an existing text design element if it would contain any descendants with a different text size than the design element was written for, or if it would contain any decendants that cannot inherit the font size of the text element
  • ex: x-height, the height of the letter "x"
  • absolute length
  • pt: points; 1pt=1/72in
  • In effect, pt is a rough approximation of the baseline height in px; for instance, 9pt has a baseline height of 9px, which corresponds to font-size 12px
  • pt is usually larger than the baseline px by 0.5 to 1.0
  • pc: picas; 1pc=12pt
  • in: inches; 1in=2.54cm
  • cm: centimeters; 1cm=10mm
  • mm: millimeters
  • relative percentage: [+,-]<%>
  • 100% is the same as 1em
  • By default, 100% is relative to the browser's default font size, which should be 16px for most browsers (this varies if the browser's text size is changed)
  • Applying a % font size to multiple ancestors of an element has a cumulative effect
  • Optionally apply font-size:100% to all non-form elements, as a starting point
  • For most browsers, with font-size:100%, the ratio is 1em = 16px
 px       em        %       pt     height px
----    ------    -----    ----   -----------
   8    0.5       50       6
   9    0.5625    56.25    7
  10    0.625     62.5     7.5        7
  11    0.6875    68.75    8          8
  12    0.75      75       9          9
  14    0.875     87.5     10.5      10
  16    1         100      12        12
  18    1.125     112.5    13.5      13
  20    1.25      125      14.5      15
  22    1.375     137.5    16        16
  24    1.5       150      18        17
  26    1.625     162.5    20        19
  28    1.75      175      21.5      20
  30    1.875     187.5    22.5      22
  32    2         200      24
px versus em
  • px is simpler and more predictable and constant, while em is more adaptable
  • em should only be used if there's a compelling reason, and if there's time to create an organized plan for reusability and coding guidelines
  • If in doubt, use px

Advantages of em

  • em offers support for accessibility in IE6; if this is a significant factor, favor using em instead of px
  • If there's a need to allow the relative text size for one section of the page to be easily increased or decreased (possibly by the user), without affecting the surrounding content, this can be easily accomplished with em by changing the font size for a single ancestor element; with px, the font size for each type of text element has to be changed individually  

Disadvantages of em

  • If a third-party component specifies a font-size for ancestors of text elements, this will be more problematic for a site that uses em (due to the cumulative effects of em), than for one using px
  • em requires a higher level of reusability planning and a more-thorough application of consistent coding guidelines than px (to avoid the coding and maintenance chaos resulting from the unintentional cumulative effects of em font sizes in ancestor elements)
Small font sizes
  • Safari is the only browser that can display a font-size smaller than 11px as bold
  • Safari can display any font-size as bold
  • In Opera 9, any font-size smaller than 9px displays as 9px
  • Generic font names: serif, sans-serif, cursive, fantasy, monospace
  • Add a generic font name at the end of the list of acceptable fonts
  • If a font name contains blank spaces, put it in double quotes
  • Relative values are generally more useful than absolute values
  • px seems to be commonly used
font: 16px/19px arial, sans-serif;
font: bold italic small-caps 16px/19px arial, sans-serif;

font-family: "Times New Roman", Times, serif;
font-family: Helvetica,Arial, sans-serif;
font-family: "Courier New", Courier, monospace;
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-size: 10px;
font-weight: bold;
font-style: italic;


list-style: <type> <position> <image>;
list-style-type: [none, disc, circle] | [square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha];
list-style-position: [outside, inside];
list-style-image: [none, url];
* This list uses

* This list uses
Resetting a list
ul {
    margin-left: 0;    /* IE7- */
    padding-left: 0;   /* All browsers except IE7- */
    list-style: none;
Background bullets
  • For lists with custom bullet images, it's easier to get consistent alignment if the bullet is displayed as a bg image of the <li> and left-padding is added
ul {margin:0; list-style:none;}
ul li {background:url(bullet.png) no-repeat left 5px; padding-left:11px;}


position: [static, relative, absolute, fixed]; 
  • static: Normal position (left and top do not apply)
  • relative: Relative to the normal position
  • absolute: Relative to the parent position
z-index: <auto, number>;   /* default:auto */
  • DOM:
top, left, right, bottom
[top, left, right, bottom]: <value>;
text-align: [left, right, center, justify];
vertical-align: [top, middle, bottom, <percentage>, baseline, ...];   /* Default: baseline */
  • top: The top of the element is aligned with the top of the tallest element on the line
  • middle: The element is placed in the middle of the parent element
  • bottom: The bottom of the element is aligned with the lowest element on the line
  • %: Aligns the element in a % value of the "line-height" property. Negative values are allowed 
  • baseline: The element is placed on the baseline of the parent element
  • sub: Aligns the element as a subscript
  • super: Aligns the element as a superscript
  • text-top: The top of the element is aligned with the top of the parent element's font
  • text-bottom: The bottom of the element is aligned with the bottom of the parent element's font
  • length: baseline, with length used as bottom padding (in effect)


width: [auto, <length>, <%>];
min-width: [<length>, <%>];
max-width: [none, <length>, <%>];
height: [auto, <length>, <%>]; 
max-height: [none, <length>, <%>];
min-height: [<length>, <%>];
  • width and height apply to block-level and img elements
div vs table cell
  • For a div, setting the width establishes the minimum and maximum width
  • For a table cell, setting the width establishes the minimum width;  the maximum width can be set separately using max-width


line-height: [normal, <number>, <length>, <percentage>];
  • 100% is the same as 1em which is the same as 1
white-space: [normal, pre, nowrap]; 
  • normal: Multiple spaces are collapsed
  • pre: Multiple spaces are not collapsed
  • nowrap: No line wrapping allowed without a <br> tag
text-indent: [<length>, <%>];   /* Indent the first line of text */
word-spacing: [normal, <length>];
letter-spacing: [normal, <length>];
text-transform: [none, capitalize, uppercase, lowercase];
text-decoration: [underline, overline, line-through, blink, none];


visibility: [visible, hidden, collapse];
  • collapse: collapses table rows or columns; behaves like visibility:hidden for other elements
  • An element with visibility:hidden still occupies space on the page
  • Changing the visibility property has no effect when display:none is used
display: [block, inline, none]; 
  • block: Displayed with a line break before and after the element.
  • inline: Displayed with no line break before or after the element.
  • none: Not displayed
  • An element with display:none is invisible and does not occupy space on the page
overflow: [visible, hidden, scroll, auto];
  • hidden: Content that overflows an element is clipped
  • scroll: Horizontal and vertical scrollbars are added (disabled if not needed)
  • auto: Horizontal and vertical scrollbars are independently added if needed
float: [left, right, none];         /* Where an adjacent element should be located. */
clear: [none, left, right, both];   /* Where an adjacent element should not be located. */
clip: rect(top right bottom left);
  • Applies to elements with position:absolute
  • Determines what portion of the overall element is displayed
  • Does not affect the position or size of the element
  • DOM: = "rect(top right bottom left)";
cursor: [auto, default, pointer, text, crosshair, wait, help];
table-layout: [fixed, automatic];   /* default: automatic  */
  • fixed: The rendered width of each column is not affected by the size of the content; it's determined entirely by the table width and the cell width, allowing the layout to be rendered faster
opacity:[0.0-1.0];               /* 0 means completely transparent */
filter:alpha(opacity=[0-100]);   /* IE8-: 0 means completely transparent */
  • Elements with opacity 0 (including form elements) still fire events (FF, IE6/7/8, Safari, Chrome, ...)


Resources URL: 
Sources URL: 

See Also