Looking for a CSS property while working on web documents? What if you have all those properties available to you in a single chart. The chart has been alphabetically sectioned to make it easier to find different properties. Hopefully you will find it a useful reference.
Please note that this chart covers only the most commonly and frequently required properties.
CSS Property Chart (* Identifies optional values)
| Property Name |
Possible Values |
Usage |
| Background |
background
(The shorthand property) |
backgound-color
background-image
*background-position
*background-repeat
*background-attachment |
div {
background: #ffc url(abc.gif) right top repeat-x;
} |
| background-color |
color-hex
color-name
color-RGB
transparent |
div {
background-color: #ffccff;
} |
| background-image |
url
none |
div {
background-image: url(../images/abc.jpg);
} |
| background-position |
top
right
bottom
left
center
x-%
y-%
x-pos
y-pos |
div {
background-position: left top;
}
div {
background-position: 40% 60%;
} |
| background-repeat |
repeat
repeat-x
repeat-y
no-repeat |
div {
background-repeat: no-repeat;
} |
| Border |
 |
border
(The shorthand property) |
border-color
border-style
border-width |
#container {
border: #333 solid 1px;
} |
| border-color |
hec code
RGB color
color-name |
#container {
border-color: red;
} |
| border-style |
solid
dotted
dashed
double
groove
ridge
inset
outset
none |
#container {
border-style: groove;
} |
border-top
border-right
border-bottom
border-left |
border-color
border-style
border-width |
#container {
border-top: #666 ridge 2px;
} |
border-top-width
border-right-width
border-bottom-width
border-left-width |
thin
medium
thick
length |
#container {
border-top-width: 4px;
} |
border-top-color
border-right-color
border-bottom-color
border-left-color |
hex code
colro name
RGB |
#container {
border-top-color: blue;
} |
border-top-style
border-right-style
border-bottom-style
border-left-style |
solid
dotted
dashed
double
groove
ridge
inset
outset
none |
#container {
border-top-style: dashed;
} |
| Font |
|
font
(The shorthand property) |
*font-style
*font-variant
*font-weight
font-size
*line-height
font-family |
p {
font: italic small-caps bold 1em/95% arial, sans-serif, verdana;
}
(95% represents line-height property) |
| font-style |
normal
italic
oblique |
p {
font-style: italic;
} |
| font-variant |
normal
small-caps |
p {
font-variant: small-caps;
} |
| font-weight |
normal
bold
bolder
lighter
100, 200, 300, 400,
500, 600, 700, 800, 900 |
p {
font-weight: bold;
} |
| font-size |
xx-small
x-small
small
smaller
medium
large
x-large
xx-large
larger
length
percentage% |
p {
font-size: 110%;
}
p {
font-size: larger;
}
p {
font-size: 12px;
} |
| line-height |
normal
number
length
percentage% |
p {
line-height: 1.3;
} |
| font-family |
family name
generic family |
p {
font-family: arial, verdana, sans-serif;
} |
| Table |
|
| border-spacing |
length |
table.article {
border-spacing: 2px;
} |
| border-collapse |
collapse
separate |
table.article {
border-collapse: separate;
} |
| empty-cells |
show
hide |
table.article {
empty-cells: hide;
} |
| Lists |
|
| list-style |
list-style-type
list-style-position
list-style-image |
ol {
list-style: decimal;
} |
| list-style-type |
circle
disc
decimal
decimal-leading-zero
square
lower-roman
upper-roman
none |
ul {
list-style-type: disc;
} |
| list-style-image |
url
none |
ul {
list-style-image: url(abc.gif);
} |
| list-style-position |
inside
outside |
ul {
list-style-position: inside;
} |
| Padding |
padding
(The shorthand property) |
padding-top
padding-right
padding-bottom
padding-left |
#indented {
padding: top right bottom left;
padding: 10px 0 0 20px;
}
(No need to put unit with 0 values) |
padding-top
padding-right
padding-bottom
padding-left |
length
percentage% |
#lowered {
padding-top: 12px;
} |
| Margin |
|
margin
(The shorthand property) |
margin-top
margin-right
margin-bottom
margin-left |
#indented {
margin: top right bottom left;
margin: 10px 0 0 20px;
}
(No need to put unit with 0 values) |
margin-top
margin-right
margin-bottom
margin-left |
length
percentage% |
#lowered {
margin-top: 12px;
} |
