Below is a list of various style properties, a description, values that can be applied and examples. Please refer to the browser support page for details on whether the effect you want will work in the different browser flavors and versions.

Text properties
Property Description Values Example
color Sets the color of the element color name
hex value		 p {color: red;}
p {color: #CC0000;}
font-weight Lets you select the weight or boldness of the font. lighter
normal
bold
bolder
100
200
300
...
900 		p {font-weight: bold}
Displays the font as bold.
 
font-family Specifies the font family, or typeface, to use for the element.
You can specify a series of names and the first available font is used.
 		 family name
generic name:
serif
sans-serif
cursive
fantasy
monospace 		p {font-family: verdana, arial, helvetica, sans-serif}
Displays the font in verdana, if available. If not, try arial, then helvetica, then any sans-serif font.
font-size Let you select the size of the type in the font. Font size may be specified in absolute units or relative to the "current" size. XX units
%
larger
smaller
xx-small
x-small
small
medium
large
x-large
xx-large
 		 p{font-size: 10px}
Displays the paragraph in 10 pixels type.

H1 {font-size: 200%}

Displays heading 1 as 200% of normal text.
 
font-size-adjust This property allows you to specify an aspect value for an element that will preserve the x-height of the first choice font in the substitute font. number
none 		 
font-variant Lets you select the small caps style of the typeface. normal
small-caps 		H2 {font-family: verdana, arial, helvetica, sans-serif; font-variant: small-caps}
Displays the heading 2 as small-caps.
 
font-style Specifies the style of type to use for the element. normal
italic
oblique 		H2 {font-family: times, times new roman, serif; font-style: italic}
Displays the heading 2 as italic.
font-stretch Selects a normal, condensed, or extended face from a font family normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded		  
text-decoration Sets underlining, overlining, strike-through, or blink attributes for the element. underline
overline
line-through
blink
none 		A:link {text-decoration: overline;}
All links will have an overline.
text-transform Set the case of the text capitalize
uppercase
lowercase
none		 p {text-transform: capitalize}
Capitalizes the first character of each word in the paragraph
p (text-transform: lowercase;}
Transforms the text to lower case
text-shadow      
letter-spacing Lets you control the space between letters. normal
XX units 		p {letter-spacing: 1px}
Adds 1 pixel of space between letters.
 
word-spacing Lets you control the space between words. normal
XX units 		p {word-spacing: 5px}
Puts an extra 5 pixels of space between each word
line-height Also known as "leading" or "line space." Specifies the distance between baselines of consecutive lines of text. normal
XX units
% 		p {line-height: 14px}
Sets 14 pixels of space from baseline to baseline.
 
vertical-align Aligns the element vertically to the baseline baseline
sub
super
top
text-top
middle
bottom
text-bottom
 		 td {vertical-align: top;}
Aligns all the content to the top of the baseline
text-indent Sets the amount of indent for the first line of a text block XX units
% 		p {text-indent: 2px}
Indents the first line of the paragraph 2 pixels.
 
text-align Aligns the element horizontally across the page or within a division left
right
center
justify 		th {text-align: center}
Centers all table headers.
 
direction      
unicode-bidi      
 

Backgrounds, borders, margins and padding
Property Description Values Example
background-color Sets the color for the background of the element color name

hex value

 p {background-color: blue;}

p {background-color: #0033CC;}
background-image Specifies an image to use for the background of an element. url(URLname) body {background-image: url(/graphics/bg.gif)}
Displays the image "bg.gif" in the background area of the whole page body.
 
background-attachment Lets you attach the background image so that it doesn't scroll. scroll
fixed 		body {background-image: url(/graphics/bg.gif); background-attachment: fixed}
Displays the image "bg.gif" in the background area of the page body and prevents the image from scrolling.
 
background-repeat Specifies how and if a background image is repeated. repeat
repeat-x
repeat-y
no-repeat 		body {background-image: url(/graphics/bg.gif); background-repeat: repeat}
Displays the image "bg.gif" in the background area of the page body and repeats the image vertically and horizontally.
background-position Sets the initial position of the background image. vertical %
horizontal %
top
center
bottom
left
center
right 		body {background-image: url(/graphics/bg.gif); background position: center center}
Centers the background image vertically and horizontally on the page body.
 
background background-color, background-image, background-repeat, background-attachment, background-position    
border-width Sets the width of the element's border. XXunits
thin
medium
thick
none 		td {border-width: thick}
Displays a thick border around the table cell.
 
border-top-width Sets the width of the element's top border. width value
style value
color value 		td {border-top-width: thin solid green}
Displays a thin solid green border at the top of the table cell.
border-left-width Sets the width of the element's left border. width value
style value
color value 		td {border-left-width: thin solid green}
Displays a thin solid green border at the top of the table cell.
border-bottom-width Sets the width of the element's bottom border. width value
style value
color value 		td {border-bottom-width: thin solid green}
Displays a thin solid green border at the top of the table cell.
border-right-width Sets the width of the element's right border. width value
style value
color value 		td {border-right-width: thin solid green}
Displays a thin solid green border at the top of the table cell.
border-color Sets the color of the element's border. color name
hex value		 td {border-color: blue}
Displays a blue border around the table cell.
 
border-style Sets the style of the element's border. none
dotted
dashed
solid
double
groove
ridge
inset
outset 		table {border-style: dotted}
Displays a dotted border around the table.
 
border Sets the width, color, and style of the border simultaneously width value
style value
color value 		td {border: 1px solid green}
Displays a 1 pixel wide solid green border on table cell.
border-top Sets the width, color, and style of the border simultaneously width value
style value
color value 		td {border-top: 1px solid green}
Displays a 1 pixel wide solid green border on the top of the table cell.
border-left Sets the width, color, and style of the border simultaneously width value
style value
color value 		td {border-left: 1px solid green}
Displays a 1 pixel wide solid green border on the left of the table cell.
border-bottom Sets the width, color, and style of the border simultaneously width value
style value
color value 		td {border-bottom: 1px solid green}
Displays a 1 pixel wide solid green border on the bottom of the table cell.
border-right Sets the width, color, and style of the border simultaneously width value
style value
color value 		td {border-right: 1px solid green}
Displays a 1 pixel wide solid green border on the right of the table cell.
margin      
margin-top Places the top margin of the element; you can use negative values. XX units
%
auto 		p {margin-top: 5px}
Displays the top margin of the paragraph 5px down the page.
margin-left Places the left margin of the element; you can use negative values. XX units
%
auto 		div {margin-left: 20px}
Displays the left margin of the division 20 pixels from the left of the page.
margin-bottom Places the bottom margin of the element; you can use negative values. XX units
%
auto 		p {margin-bottom: 5px}
Displays the bottom margin of the paragraph as 5px.
margin-right Places the right margin of the element; you can use negative values. XX units
%
auto 		div {margin-right: 20px}
Displays the left margin of the division 20 pixels from the right of the page.
padding      
padding-top Inserts padding at the top of the element. XX units
%
auto 		Table {padding-top: 10px}
Inserts 10 pixels at the top of every cell in the table.
padding-left Inserts padding along the left side of the element. XX units
%
auto 		Table {padding-left: 10px}
Inserts 10 pixels to the left of every cell in the table.
padding-bottom Inserts padding at the bottom of the element. XX units
%
auto 		Table {padding-bottom: 10px}
Inserts 10 pixels at the bottom of every cell in the table.
padding-right Inserts padding along the right side of the element. XX units
%
auto 		Table {padding-right: 10px}
Inserts 10 pixels to the right of every cell in the table.
 

Layout properties
Property Description Values Example
top Sets the distance from the top of the page. XX units div {top: 100px}
The division will start 100 pixels from the top of the page.
left Sets the distance from the left of the page. XX units div {top: 100px}
The division will start 100 pixels from the left of the page.
bottom Sets the distance from the bottom of the page. XX units div {top: 100px}
The division will start 100 pixels from the bottom of the page.
right Sets the distance from the right of the page. XX units div {top: 100px}
The division will start 100 pixels from the right of the page.
width Sets the width of the element. XX units div {width: 100px}
The division will have a width of 100 pixels
min-width      
max-width      
height Sets the height of the element. XX units div {height: 100px}
The division will have a height of 100 pixels
z-index      
visibility      
overflow      
float Places the element to the left or right and flows text around it. right
left
none 		img {float: left}
Places images to the left margin and flows text around it.
clear Prevents text from flowing around an element. right
left
none 		img {float: clear}
Places images to the left margin and prevents text flowing around it.
clip      
back to top

Elements properties
Property Description Values Example
display Specifies the category of object an element belongs to: a block element, like a heading or paragraph; an inline element, like emphasis or anchors; or a list-item element. If the category is none, the content of the element should not be displayed at all. none
" "
block
inline
list-item		 p {display: none}
Hides the content of the paragraph.

p {display: ""}

Display the contents of the paragraph.

p {display: block}

Treats the paragraph as a block element, which can be positioned separately using the positioning attributes.

white-space Describes how white space should be handled within the block elements. normal
pre
no-wrap 		p {white-space: no-wrap}
The paragraph will break only with a specific <br> tag.
list-style-type Sets the type of symbol that appears in front of a list item. disc
circle
square
decimal
lower-
roman
upper-
roman
lower-
alpha
upper
alpha 		ul {list-style-type: square}
Unordered list items will use a square bullet.
list-style-image Selects a specific image to serve as a bullet in front of list items. url(URLname) ul {list-style-image: url(/graphics/bullet.gif)}
Unordered list items will use the image "bullet.gif" as a bullet.
list-style-position Describes how the bullet marker and text in a list line up with each other. inside
outside 		ul {list-style-position: outside}
Creates the effect of a hanging indent

ul {list-style-position: inside}

The bullet and the second line of text are flush left.

list-style      
table-layout      
border-collapse      
border-spacing