CSS Reference

Named Colors

The following list are the named colors that are part of HTML 4 and CSS 2. There are other named colors that many browsers understand, but these are assured to work in all browsers. The background of the color name is the color in this list, and the associated hex value is listed. In the property section the text "<color>" will refer to one of the below named colors or a hex value.

• aqua - #00ffff
• black - #000000
• blue - #0000ff
• fuchsia - #ff00ff
• grey - #808080
• green - #008000
• lime - #00FF00
• maroon - #800000
• navy - #000080
• olive - #808000
• purple - #800080
• red - #ff0000
• silver - #c0c0c0
• teal - #008080
• white - #ffffff
• yellow - #ffff00

Units of Measure

The following will are the units defined for CSS. In the properties section the text "<number>" will refer to a number followed by either nothing or one of the following units of measure. For example 1px is one pixel.

• % - percent
• cm - centimeters
• em - ems
• ex - relative to the height of the letter x
• mm - millimeters
• pc - picas, 1 pica = 12 points
• pt - points, 1 point = 1/72 of an inch
• px = pixels

Properties

• background
  • background:<color>;
  background-color
  • background-color:<color>;
  • background-image
    • background-image:none; - no background image
    • background-image:<url>; - set background image to that of the url
  • background-repeat
    • background-repeat:repeat; - tiles both horizontally and vertically
    • background-repeat:repeat-x; - tiles horizontally
    • background-repeat:repeat-y; - tiles vertically
    • background-repeat:no-repeat; - Does not tile
  • background-attachment
    • background-attachment:fixed; - image does not scroll with page
    • background-attachment:scroll; - images scrolls with page
  • background-position
• border
  • border-bottom
    • border-bottom-color
    • border-bottom-style
    • border-bottom-width
  • border-collapse
    • border-collapse:collapse;
    • border-collapse:separate;
  • border-color
    • border-color:<color>
    • border-color:transparent;
  • border-left
    • border-left-color
    • border-left-style
    • border-left-width
  • border-right
    • border-right-color
    • border-right-style
    • border-right-width
  • border-spacing
    • border-spacing:<number>;
  • border-style
    • border-style:dashed;
    • border-style:dotted;
    • border-style:double;
    • border-style:groove;
    • border-style:hidden;
    • border-style:inset;
    • border-style:none;
    • border-style:outset
    • border-style:ridge;
    • border-style:solid;
  • border-top
    • border-top-color
    • border-top-style
    • border-top-width
  • border-width
    • border-width:medium;
    • border-width:thin;
    • border-width:thick;
    • border-width:<number>
• bottom
  • bottom:auto;
  • bottom:<number>;
• caption-side
  • caption-side:top;
  • caption-side:bottom;
• clear
  • clear:both;
  • clear:left;
  • clear:none;
  • clear:right;
• clip
  • clip:auto;
  • clip:rect(<number>,<number>,<number>,<number>);
• color
  • color:<color>
• content
• cursor
  • cursor:auto;
  • cursor:crosshair;
  • cursor:default;
  • cursor:e-resize;
  • cursor:help;
  • cursor:move;
  • cursor:ne-resize;
  • cursor:n-resize;
  • cursor:nw-resize;
  • cursor:pointer;
  • cursor:progress;
  • cursor:se-resize;
  • cursor:s-resize;
  • cursor:sw-resize;
  • cursor:text;
  • cursor:w-resize;
• direction
  • direction:ltr;
  • direction:rtl;
• display
  • display:block;
  • display:inline;
  • display:inline-block;
  • display:inline-table;
  • display:list-item;
  • display:none;
  • display:run-in;
  • display:table;
  • display:table-caption;
  • display:table-cell;
  • display:table-column;
  • display:table-column-group;
  • display:table-footer-group;
  • display:table-header-group;
  • display:table-row;
  • display:table-row-group;
• empty-cells
  • empty-cells:hide;
  • empty-cells:show;
• float
  • float:left;
  • float:none;
  • float:right;
• font
  • font:caption;
  • font:icon;
  • font:menu;
  • font:message-box;
  • font:small-caption;
  • font:status-bar;
  • font-family
  • font-size
    • font-size:<number>;
    • font-size:large;
    • font-size:larger;
    • font-size:medium;
    • font-size:small;
    • font-size:smaller;
    • font-size:x-large;
    • font-size:x-small;
    • font-size:xx-large;
    • font-size:xx-small;
  • font-style
    • font-style:italic;
    • font-style:normal;
    • font-style:oblique;
  • font-variant
    • font-variant:normal;
    • font-variant:small-caps;
  • font-weight
    • font-weight:bold;
    • font-weight:bolder;
    • font-weight:lighter;
    • font-weight:normal;
• height
  • height:<number>
• left
  • left:<number>
• line-height
• letter-spacing
• list-style
  • list-style-image
  • list-style-position
  • list-style-type
• margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
• max-height
• max-width
• min-height
• min-width
• outline
  • outline-color
  • outline-style
  • outline-width
• overflow
• padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
• page-break-after
• page-break-before
• page-break-inside
• position
• quotes
• right
• table-layout
• text-align
• text-decoration
• text-indent
• text-transform
• top
• unicode-bidi
• vertical-align
• visibility
• white-space
• width
• word-spacing
• z-index

Pseudo-Classes and Pseudo-Elements

• :active
• :after
• :before
• :first-letter
• :first-line
• :focus
• :hover
• :lang
• :link
• :visited