Color and Background Properties
|
Property |
Valid Values |
Example |
color |
color |
color: red |
background-color |
color | transparent |
background-color: yellow |
background-image |
url | none |
background-image: url(house.jpg) |
background-repeat |
repeat | repeat-x | repeat-y | no-repeat |
background-repeat: no-repeat |
background-attachment |
scroll | fixed |
background-attachment: fixed |
background-position |
[ position | length ] | {1,2} | [ top | center | bottom ] || [ left | center | right ] |
background-position: top center |
background |
transparent | color || url || repeat || scroll || position |
background: silver url(house.jpg) repeat-y |
Box Properties
|
Property |
Valid Values |
Example |
margin-top |
length | percentage | auto |
margin-top:5px |
margin-right |
length | percentage | auto |
margin-right:5px |
margin-bottom |
length | percentage | auto |
margin-bottom:1em |
margin-left |
length | percentage | auto |
margin-left:5pt |
margin |
length | percentage | auto {1,4} |
margin: 10px 5px 10px 5px |
padding-top |
length | percentage |
padding-top:10% |
padding-right |
length | percentage |
padding-right:15px |
padding-bottom |
length | percentage |
padding-bottom:1.2em |
padding-left |
length | percentage |
padding-left:10pt; } |
padding |
length | percentage {1,4} |
padding: 10px 10px 10px 15px |
border-top-width |
thin | medium | thick | length |
border-top-width:thin |
border-right-width |
thin | medium | thick | length |
border-right-width:medium |
border-bottom-width |
thin | medium | thick | length |
border-bottom-width:thick |
border-left-width |
thin | medium | thick | length |
border-left-width:15px |
border-width |
thin | medium | thick | length {1,4} |
border-width: 3px 5px 3px 5px |
border-top-color |
color |
border-top-color:navajowhite |
border-right-color |
color |
border-right-color:whitesmoke |
border-bottom-color |
color |
border-bottom-color:black |
border-left-color |
color |
border-left-color:#C0C0C0 |
border-color |
color {1,4} |
border-color: green red white blue; } |
border-top-style |
none | solid | double | groove | ridge | inset | outset |
border-top-style:solid |
border-right-style |
none | solid | double | groove | ridge | inset | outset |
border-right-style:double |
border-bottom-style |
none | solid | double | groove | ridge | inset | outset |
border-bottom-style:groove |
border-left-style |
none | solid | double | groove | ridge | inset | outset |
border-left-style:none |
border-style |
none | solid | double | groove | ridge | inset | outset |
border-style:ridge; } |
border-top |
border-width | border-style | border-color |
border-top: medium outset red |
border-right |
border-width | border-style | border-color |
border-right: thick inset maroon |
border-bottom |
border-width | border-style | border-color |
border-bottom: 10px ridge gray |
border-left |
border-width | border-style | border-color |
border-left: 1px groove red |
border |
border-width | border-style | border-color |
border: thin solid blue |
float |
none | left | right |
float:none |
clear |
none | left | right | both |
clear:left |
Positioning Properties
|
Property |
Valid Values |
Example |
Applies to |
clip |
shape | auto |
clip:rect(0px 200px 200px 0px) |
all elements |
height |
length | auto |
height:200px |
DIV, SPAN and replaced elements |
left |
length | percentage | auto |
left:0px |
absolutely and relatively positioned elements |
overflow |
visible | hidden | scroll | auto |
overflow:scroll |
all elements |
position |
absolute| relative | static |
position:absolute |
all elements |
top |
length | percentage | auto |
top:0px |
absolutely and relatively positioned elements |
visibility |
visible | hidden | inherit |
visibility:visible |
all elements |
width |
length | percentage | auto |
width:80% |
DIV, SPAN and replaced elements |
z-index |
auto | integer |
z-index:-1 |
absolutely and relatively positioned elements |