Sei sulla pagina 1di 4

CSS Reference (based on MSDN and WC3 CSS reference)

- Font Properties

Property Valid Values Example Inherited?


font- [font name or type] font-family: Y
family Verdana, Arial;
font-style normal | italic font-style:italic; Y
font- normal | small-caps font-variant:small- Y
variant caps;
font- normal | bold font-weight:bold; Y
weight
font-size [ xx-large | x-large | large | medium | small | x- font-size:12pt; Y
small | xx-small ] | [ larger | smaller ] |
percentage | length
font [ font-style || font-variant || font-weight ] ? font- font: bold 12pt Y
size [ / line-height ] ? font-family Arial;

- Color and Background Properties

Property Valid Values Example Inherited?


color color color: red Y
background- color | transparent background-color: N*
color yellow
background- url | none background-image: N*
image url(house.jpg)
background- repeat | repeat-x | repeat-y | no- background-repeat: no- N*
repeat repeat repeat
background- scroll | fixed background-attachment: N*
attachment fixed
background- [ position | length ] | {1,2} | [ top | background-position: N*
position center | bottom ] || [ left | center | top center
right ]
background transparent | color || url || repeat || background: silver N*
scroll || position url(house.jpg) repeat-y

* Starting in CSS2, the properties indicated above are inherited.

- Text Properties

Property Valid Values Example Inherited?


letter-spacing normal | length letter-spacing:5pt Y
text- none | underline | overline | line- text- N
decoration through decoration:underline
vertical-align sub | super | vertical-align:sub N
text-transform capitalize | uppercase | lowercase | text-transform:lowercase N
none
text-align left | right | center | justify text-align:center N
text-indent length | percentage text-indent:25px N
line-height normal | number | length | percentage line-height:15pt N

- Box Properties

Property Valid Values Example Inherited?


margin-top length | percentage | auto margin-top:5px N
margin-right length | percentage | auto margin-right:5px N
margin-bottom length | percentage | auto margin-bottom:1em N
margin-left length | percentage | auto margin-left:5pt N
margin length | percentage | auto {1,4} margin: 10px 5px 10px 5px N
padding-top length | percentage padding-top:10% N
padding-right length | percentage padding-right:15px N
padding- length | percentage padding-bottom:1.2em N
bottom
padding-left length | percentage padding-left:10pt; } N
padding length | percentage {1,4} padding: 10px 10px 10px N
15px
border-top- thin | medium | thick | length border-top-width:thin N
width
border-right- thin | medium | thick | length border-right-width:medium N
width
border-bottom- thin | medium | thick | length border-bottom-width:thick N
width
border-left- thin | medium | thick | length border-left-width:15px N
width
border-width thin | medium | thick | length border-width: 3px 5px 3px N
{1,4} 5px
border-top- color border-top- N
color color:navajowhite
border-right- color border-right- N
color color:whitesmoke
border-bottom- color border-bottom-color:black N
color
border-left- color border-left-color:#C0C0C0 N
color
border-color color {1,4} border-color: green red N
white blue; }
border-top- none | solid | double | groove | border-top-style:solid N
style ridge | inset | outset
border-right- none | solid | double | groove | border-right-style:double N
style ridge | inset | outset
border-bottom- none | solid | double | groove | border-bottom-style:groove N
style ridge | inset | outset
border-left- none | solid | double | groove | border-left-style:none N
style ridge | inset | outset
border-style none | solid | double | groove | border-style:ridge; } N
ridge | inset | outset
border-top border-width | border-style | border-top: medium outset N
border-color red
border-right border-width | border-style | border-right: thick inset N
border-color maroon
border-bottom border-width | border-style | border-bottom: 10px ridge N
border-color gray
border-left border-width | border-style | border-left: 1px groove red N
border-color
border border-width | border-style | border: thin solid blue N
border-color
float none | left | right float:none N
clear none | left | right | both clear:left N

- Classification Properties

Property Valid Values Example Inherited?


display none | block | inline | list-item display:none N
list-style- disk | circle | square | decimal | lower- list-style-type:upper-alpha Y
type roman | upper-roman | lower-alpha |
upper-alpha | none
list-style- url | none list-style- Y
image image:url(icFile.gif)
list-style- inside | outside list-style-position:inside Y
position
list-style keyword || position || url list-style: square outside Y
url(icFolder.gif)

- Positioning Properties

Property Valid Values Example Applies to Inherited?


clip shape | auto clip:rect(0px 200px all elements N
200px 0px)
height length | auto height:200px DIV, SPAN and replaced N
elements
left length | percentage left:0px absolutely and relatively N
| auto positioned elements
overflow visible | hidden | overflow:scroll all elements N
scroll | auto
position absolute| relative | position:absolute all elements N
static
top length | percentage top:0px absolutely and relatively N
| auto positioned elements
visibility visible | hidden | visibility:visible all elements N
inherit
width length | percentage width:80% DIV, SPAN and replaced N
| auto elements
z-index auto | integer z-index:-1 absolutely and relatively N
positioned elements

- Printing Properties

Property Valid Values Example Inherited?


page-break-before auto | always || left | right page-break-before:always N
page-break-after auto | always || left | right page-break-before:auto N

- Pseudo Classes

Property Valid Values Example Inherited?


cursor auto | crosshair | default | hand | move | e- { cursor:hand; } Y
resize | ne-resize | nw-resize | n-resize | se-
resize | sw-resize | s-resize | w-resize | text |
wait | help
active, n/a a:hover { color:red; Y
hover, link, }
visited
first-letter, any font manipulating declaration p:first-letter{ N
first-line float:left;color:blue
}
.