Properties

Background

background

• 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-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
  

Box

padding

padding: [auto, <length>, <%>]; 

• padding, padding-top, padding-left, padding-bottom, padding-right

margin

margin: [auto, <length>, <%>]; 

• margin, margin-top, margin-left, margin-bottom, margin-right

border

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

color

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

font

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: [+,-]<%>

Conversion

• For most browsers, with font-size:100%, the ratio is 1em = 16px

                                   baseline
 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

Misc

• 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

list-style

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];

list-style-position

* This list uses
list-style-position:inside

* This list uses
  list-style-position:outside

Resetting a list

ul {margin:0; 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

position

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

z-index: <auto, number>;   /* default:auto */

• DOM: obj.style.zIndex

top, left, right, bottom

[top, left, right, bottom]: <value>;

text-align

text-align: [left, right, center, justify];

vertical-align

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)

Size

width

width: [auto, <length>, <%>];

min-width: [<length>, <%>];
max-width: [none, <length>, <%>];

height

height: [auto, <length>, <%>]; 

max-height: [none, <length>, <%>];
min-height: [<length>, <%>];

Usage

• 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
  

Text

line-height

line-height: [normal, <number>, <length>, <percentage>];

• 100% is the same as 1em which is the same as 1
  

Misc

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];

Misc

visibility

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

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

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

float: [left, right, none];         /* Where an adjacent element should be located. */

clear: [none, left, right, both];   /* Where an adjacent element should not be located. */

Misc

clip: rect(top, right, bottom, left);

• DOM: obj.style.clip = "rect(top right bottom left)";

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

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]);   /* IE: 0 means completely transparent */

• Elements with opacity 0 (including form elements) still fire events (FF, IE6/7, Safari, Chrome, ...)