2. All CSS Background Properties
The number in the "CSS" column indicates in which CSS version the property
is defined (CSS1 or CSS2).
Property Description Values
background-color
Sets all the background-image
background background-repeat
background
properties in one background-attachment
declaration background-position
inherit
Sets whether a
scroll
background- background image is
fixed
attachment fixed or scrolls with
inherit
the rest of the page
color-rgb
color-hex
Sets the background
background-color color-name
color of an element
transparent
inherit
Sets the background url(URL)
background-
image for an none
image
element inherit
left top
left center
left bottom
right top
right center
Sets the starting
background- right bottom
position of a
position center top
background image
center center
center bottom
x% y%
xpos ypos
inherit
repeat
Sets if/how a repeat-x
background-
background image repeat-y
repeat
will be repeated no-repeat
inherit
3. All CSS Text Properties
The number in the "CSS" column indicates in which CSS
version the property is defined (CSS1 or CSS2).
Property Description Values
color Sets the color of a text color
ltr
direction Sets the text direction
rtl
normal
number
line-height Sets the distance between lines
length
%
letter- Increase or decrease the space normal
spacing between characters length
left
right
text-align Aligns the text in an element
center
justify
none
underline
text-
Adds decoration to text overline
decoration
line-through
blink
Indents the first line of text in length
text-indent
an element %
none
text-
color
shadow
length
none
text- Controls the letters in an capitalize
transform element uppercase
lowercase
normal
unicode-
embed
bidi
bidi-override
baseline
vertical- Sets the vertical alignment of sub
align an element super
top
4. text-top
middle
bottom
text-bottom
length
%
normal
white- Sets how white space inside an
pre
space element is handled
nowrap
word- Increase or decrease the space normal
spacing between words length
All CSS Font Properties
The number in the "CSS" column indicates in which CSS
version the property is defined (CSS1 or CSS2).
Property Description Values
font-style
font-variant
font-weight
font-size/line-height
font-family
Sets all the font
caption
font properties in one
icon
declaration
menu
message-box
small-caption
status-bar
inherit
family-name
Specifies the font family
font-family generic-family
for text
inherit
xx-small
Specifies the font size of x-small
font-size
text small
medium
5. large
x-large
xx-large
smaller
larger
length
%
inherit
normal
Specifies the font style italic
font-style
for text oblique
inherit
Specifies whether or not
normal
a text should be
font-variant small-caps
displayed in a small-caps
inherit
font
normal
bold
bolder
lighter
100
200
Specifies the weight of a 300
font-weight
font 400
500
600
700
800
900
inherit
Styling Links
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
6. All CSS List Properties
The number in the "CSS" column indicates in which CSS
version the property is defined (CSS1 or CSS2).
Property Description Values
list-style-type
Sets all the properties for a list-style-position
list-style
list in one declaration list-style-image
inherit
URL
list-style- Specifies an image as the
none
image list-item marker
inherit
Specifies if the list-item inside
list-style-
markers should appear inside outside
position
or outside the content flow inherit
none
disc
circle
square
decimal
decimal-leading-zero
armenian
list-style- Specifies the type of list- georgian
type item marker lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit
7. All CSS Border Properties
The number in the "CSS" column indicates in which CSS
version the property is defined (CSS1 or CSS2).
Property Description Values
Sets all the border border-width
border properties in one border-style
declaration border-color
Sets all the bottom border border-bottom-width
border-bottom properties in one border-bottom-style
declaration border-bottom-color
border- Sets the color of the
border-color
bottom-color bottom border
border- Sets the style of the
border-style
bottom-style bottom border
border- Sets the width of the
border-width
bottom-width bottom border
color_name
hex_number
Sets the color of the four
border-color rgb_number
borders
transparent
inherit
Sets all the left border border-left-width
border-left properties in one border-left-style
declaration border-left-color
border-left- Sets the color of the left
border-color
color border
border-left- Sets the style of the left
border-style
style border
border-left- Sets the width of the left
border-width
width border
Sets all the right border border-right-width
border-right properties in one border-right-style
declaration border-right-color
border-right- Sets the color of the right
border-color
color border
border-right- Sets the style of the right
border-style
style border
border-right- Sets the width of the right border-width
8. width border
none
hidden
dotted
dashed
solid
Sets the style of the four
border-style double
borders
groove
ridge
inset
outset
inherit
Sets all the top border border-top-width
border-top properties in one border-top-style
declaration border-top-color
border-top- Sets the color of the top
border-color
color border
border-top- Sets the style of the top
border-style
style border
border-top- Sets the width of the top
border-width
width border
thin
medium
Sets the width of the four
border-width thick
borders
length
inherit
All CSS Outline Properties
The number in the "CSS" column indicates in which CSS
version the property is defined (CSS1 or CSS2).
Property Description Values
outline-color
Sets all the outline properties in outline-style
outline
one declaration outline-width
inherit
color_name
outline-
Sets the color of an outline hex_number
color
rgb_number
9. invert
inherit
none
dotted
dashed
solid
outline- double
Sets the style of an outline
style groove
ridge
inset
outset
inherit
thin
medium
outline-
Sets the width of an outline thick
width
length
inherit
All CSS Margin Properties
The number in the "CSS" column indicates in which CSS
version the property is defined (CSS1 or CSS2).
Property Description Values
margin-top
A shorthand property for
margin-right
margin setting the margin properties
margin-bottom
in one declaration
margin-left
auto
margin- Sets the bottom margin of an
length
bottom element
%
auto
Sets the left margin of an
margin-left length
element
%
auto
margin- Sets the right margin of an
length
right element
%
auto
Sets the top margin of an
margin-top length
element
%
10. All CSS Padding Properties
The number in the "CSS" column indicates in which CSS
version the property is defined (CSS1 or CSS2).
Property Description Values
padding-top
A shorthand property for
padding-right
padding setting all the padding
padding-bottom
properties in one declaration
padding-left
padding- Sets the bottom padding of an length
bottom element %
padding- Sets the left padding of an length
left element %
padding- Sets the right padding of an length
right element %
padding- Sets the top padding of an length
top element %
All CSS Dimension Properties
The number in the "CSS" column indicates in which CSS
version the property is defined (CSS1 or CSS2).
Property Description Values
auto
height Sets the height of an element length
% inherit
none
Sets the maximum height of an
max-height length
element
% inherit
none
Sets the maximum width of an
max-width length
element
% inherit
Sets the minimum height of an length
min-height
element % inherit
length
Sets the minimum width of an
min-width %
element
inherit
11. auto
length
width Sets the width of an element
%
inherit
All CSS Positioning Properties
The number in the "CSS" column indicates in which CSS
version the property is defined (CSS1 or CSS2).
Property Description Values
auto
Sets the bottom margin length
bottom
edge for a positioned box %
inherit
shape
Clips an absolutely
clip auto
positioned element
inherit
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
Specifies the type of
cursor nw-resize
cursor to be displayed
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
auto
Sets the left margin edge length
left
for a positioned box %
inherit
Specifies what happens if auto
overflow
content overflows an hidden
12. element's box scroll
visible
inherit
absolute
Specifies the type of fixed
position positioning for an relative
element static
inherit
auto
Sets the right margin length
right
edge for a positioned box %
inherit
auto
Sets the top margin edge length
top
for a positioned box %
inherit
number
Sets the stack order of an
z-index auto
element
inherit
All CSS Float Properties
The number in the "CSS" column indicates in which CSS
version the property is defined (CSS1 or CSS2).
Property Description Values
left
Specifies which sides of
right
an element where other
clear both
floating elements are not
none
allowed
inherit
left
Specifies whether or not right
float
a box should float none
inherit
13. Center Aligning Using the margin
Property
Block elements can be aligned by setting the left and right
margins to "auto".
Note: Using margin:auto will not work in Internet Explorer,
unless a !DOCTYPE is declared.
Setting the left and right margins to auto specifies that they
should split the available margin equally. The result is a
centered element:
Example
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
Tip: Aligning has no effect if the width is 100%.
Note: In IE 5 there is a margin handling bug for block
elements. To make the example above work in IE5, add
some extra code.
Left and Right Aligning Using the
position Property
One method of aligning elements is to use absolute
positioning:
14. Example
.right
{position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;}
Note: Absolute positioned elements are removed from the
normal flow, and can overlap elements.
Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to
predefine margin and padding for the <body> element. This
is to avoid visual differences in different browsers.
There is also another problem with IE when using the
position property. If a container element (in our case <div
class="container">) has a specified width, and the !DOCTYPE
declaration is missing, IE will add a 17px margin on the right
side. This seems to be space reserved for a scrollbar. Always
set the !DOCTYPE declaration when using the position
property:
Example
Body {margin:0; padding:0;}
.container {position:relative; width:100%;}
.right {position:absolute; right:0px; width:300px;
background-color:#b0e0e6;}
15. Left and Right Aligning Using the float
Property
One method of aligning elements is to use the float
property:
Example
.right
{float:right;
width:300px;
background-color:#b0e0e6;
}
Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to
predefine margin and padding for the <body> element. This
is to avoid visual differences in different browsers.
There is also another problem with IE when using the float
property. If the !DOCTYPE declaration is missing, IE will add
a 17px margin on the right side. This seems to be space
reserved for a scrollbar. Always set the !DOCTYPE
declaration when using the float property:
Example
body
{
margin:0;
padding:0;
}
.right
{float:right;
width:300px;
background-color:#b0e0e6;}
