Allows you to set several font properties at the same time, separated by spaces. You can specify font-size, line-height, font-family, font-style, font-variant, and font-weight in this one property.

font {color:#ff0000; arial, verdana, sans-serif; 12pt;}

Allows you to specify the typefaces you want to use. Can take multiple values separated by commas, starting with your first preference, then your second choice, and ending with a generic font-family (serif, sans-serif, cursive, fantasy, or monospace).

p {font-family:arial, verdana, sans-serif;}

Allows you to specify a size of font. The font-size property has its own specific values:

Allows you to adjust the aspect value of a font, which is the ratio between the height of a lowercase letter x in the font and the height of the font.

{font-size-adjust:0.5;}

Allows you to specify the width of the letters in a font (not the size between them).

p {font-family:courier; font-stretch:semi-condensed;}

Applies styling to a font. If the specified version of the font is available, it will be used; otherwise, the browser will render it.

p {font-style:italic;}

Creates capital letters that are the same size as normal lowercase letters.

Specifies the thickness of the text — its !"boldness." !

p {font-weight:bold;}

Specifies the distance between letters as a unit of length.

p {letter-spacing:1em;}

Specifies whether text is aligned left, right, center, or justified.

p {text-align:center}

Specifies whether text should have an underline, overline, line-through, or blink appearance.

p {text-decoration:underline;}

Specifies the indentation in length or as a percentage of the parent element's width.

p {text-indent:3em;}

Creates a drop shadow for the text. It should take three lengths; the first two specify X and Y coordinates for the offset of the drop shadow, while the third specifies a blur effect. This is then followed by a color, which can be a name or a hex value.

.dropShadow {text-shadow: 0.3em 0.3em 0.5em black}

(Also supported in Safari 3, Chrome 2 and Opera 9.6 and higher.)

Specifies capitalization of text in an element:

p {text-transform:uppercase;}

This indicates how white space should be dealt with:

p {white-space:pre;}

This specifies the gap between words:

p {word-spacing:2em;}

This is shorthand for specifying background properties for color, url, repeat, scroll, and position; separated by a space. By default, the background is transparent.

body {background: #efefef url("images/background.gif"); }

This specifies whether a background image should be fixed in one position or scroll along the page:

body {background-attachment:fixed;
       background-image: url("images/background.gif");}

Sets the color of the background. This can be a single color or two colors blended together. Colors can be specified as a color name, hex value, or RGB value. By default the box will be transparent.

body {background-color:#efefef;}

This specifies an image to be used as a background, which by default will be tiled. Value is a URL for the image.

body {background-image: url("images/background.gif");}

Specifies where a background image should be placed in the page, from the top-left corner. Values can be an absolute distance, percentage, or one of the keywords. If only one value is given, it is assumed to be horizontal.

body {background-position:center;
      background-image: url("images/background.gif");}

Specifies if a background image should be repeated, and if so in which directions. Values are repeat to repeat horizontally and vertically, repeat-x to just repeat horizontally, repeat-y to just repeat vertically, and no-repeat to prevent it from repeating.

Position of a background image to run horizontally across the page. Values are the same as forbackground-position (default: top).

Position of a background image to run vertically down the page. Values are the same as for background-position (default: left).

This is shorthand for specifying border-style, border-width, and border-color properties.

This specifies the style of line that should surround a block box.

div.page {border-style:solid;}

Specifies the width of a border line; can be a width or a keyword.

div.page {border-width:2px;}

Specifies the color of a border; values can be a color name, hex code, or RGB value.

table {border-color:#000000;}

Specifies the vertical height of a block element.

table {height:400px;}

Specifies the horizontal width of an element.

td {width:150px;}

This specifies the height of a line of text. It is a way of controlling leading (space between multiple lines of text) because the line height may be more or less than the size of the font.

p {line-height:18px;}

This specifies the maximum height of a block-level element (same values as for height).

td {max-height:200px;}

This specifies the maximum width of a block-level element (same values as for width).

td {max-width:400px;}

This specifies the minimum height of a block-level element (same values as for height).

td {min-height:100px;}

This specifies the minimum width of a block-level element (same values as for width).

td {min-width:200px;}

This specifies the width of a margin around a box.

p {margin:15px;}

This specifies the distance between an element's border and its content.

td {padding:20px;}

This is shorthand allowing you to specify list-style-position and list-style-type.

ul {list-style: inside disc}

This specifies whether the marker should be placed inside each item of a list or to the left of them.

ul {list-style-position:inside;}

This indicates the type of bullet or numbering that a bullet should use.

ul {list-style-type:circle;}

Additional numbered list styles are available in CSS, but unfortunately they are not supported in IE7, Netscape 7, or Firefox 2.

This specifies the space between a list item and its marker.

ol {marker-offset:2em;}

Specifies the positioning schema that should be used for an element. When an element is positioned, you also need to use the box-offset properties covered next (top, left, bottom, and right). Note that you should not use top and bottom or left and right together (if you do, top and left take priority).

p.article{position:absolute; top:10px; left:20px;

This sets the vertical position of an element from the top of the window or containing element.

This sets the horizontal position of an element from the left of the window or containing element.

This sets the vertical position of an element from the bottom of the window or containing element.

This sets the horizontal position of an element from the right of the window or containing element.

This sets the vertical positioning of an inline element:

span.superscript {vertical-align:super;}

Controls which overlapping element appears to be on top. Positive and negative numbers are permitted.

p {position:absolute; top:10px; left:20px; z-index:3;}

Controls which part of an element is visible. Parts outside the clip are not visible. If value is rect(), it takes the following form:

rect(25 100 100 25)

This specifies how a container element will display content that is too large for its containing element.

p {width:200px; height:200px; overflow:scroll;}

Same as overflow, but only for the horizontal x-axis. First supported in IE5.

Same as overflow, but only for the vertical y-axis. First supported in IE5.

Shortcut for the outline-color, outline-style, and outline-width properties:

outline {solid #ff0000 2px}

Note that outline-color, outline-style, and outline-width take the same values as border-color, border-style, and border-width.

This specifies the border model that the table should use (whether adjacent borders should be collapsed into one value or kept separate).

table {border-collapse:separate;}

This specifies the distance between adjacent cells' borders.

table {border-spacing:2px;}

This indicates which side of a table a caption should be placed on.

caption {caption-side:bottom;}

This specifies whether borders should be displayed if a cell is empty.

td, th {empty-cells:hide;}

Specifies how the browser should calculate the layout of a table; can affect the speed of rendering a large or graphics-intensive table.

Forces elements, which would normally wrap around an aligned element, to be displayed below it. Value indicates which side may not touch an aligned element.

p {clear:left;}

Specifies how an element is rendered, if at all. If set to none the element is not rendered and it does not take up any space. This property can also force an inline element to be displayed as a block or vice versa.

span.important {display:block;}

While the default value of this property is inline, browsers tend to treat the element depending on its inherent display type. Block-level elements, such as headings and paragraphs, get treated as if the default were block, whereas inline elements such as <i>, <b>, or <span> get treated as inline.

Subsequent elements should be wrapped to the left or right of the element, rather than below.

img.featuredItem {float:left;}

Specifies whether an element should be displayed or hidden. Even if hidden, elements take up space on the page, but are transparent.

Specifies the direction of text from left to right or right to left. This should be used in association with the unicode-bidi property.

td.word{direction:rtl; unicode-bidi:bidi-override;}

The unicode-bidi property allows you to override Unicode's built-in directionality settings for languages.

td.word{unicode-bidi:bidi-override; direction:rtl; }