XHTML
(eXtensible HyperText Markup Language)

CSS Declarations Reference

Font | Color and Background | Text | Box | Classification | Positioning | Printing | Pseudo

Font Properties

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

Color and Background Properties

Property Valid Values Example Inherited?
color
(refers to font color)		 color color: red Y
background-color color | transparent background-color: yellow N*
background-image url | none background-image: url(imagename.jpg) N*
background-repeat repeat | repeat-x | repeat-y | no-repeat background-repeat: no-repeat N*
background-attachment scroll | fixed background-attachment: fixed N*
background-position [ position | length ] | {1,2} | [ top | center | bottom ] || [ left | center | right ] background-position: top center N*
background transparent | color || url || repeat || scroll || position background: silver url(imagename.jpg) repeat-y N*

* 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-decoration none | underline | overline | line-through text-decoration: underline N
vertical-align sub | super | vertical-align: sub N
text-transform capitalize | uppercase | lowercase | none text-transform: lowercase N
text-align left | right | center | justify text-align: center N
text-indent length | percentage text-indent: 5px 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-bottom length | percentage padding-bottom: 1.2em N
padding-left length | percentage padding-left: 10pt N
padding length | percentage {1,4} padding: 10px 10px 10px 15px N
border-top-width thin | medium | thick | length border-top-width: thin N
border-right-width thin | medium | thick | length border-right-width: medium N
border-bottom-width thin | medium | thick | length border-bottom-width: thick N
border-left-width thin | medium | thick | length border-left-width: 15px N
border-width thin | medium | thick | length {1,4} border-width: 3px 5px 3px 5px N
border-top-color color border-top-color: blue N
border-right-color color border-right-color: purple N
border-bottom-color color border-bottom-color: black N
border-left-color color border-left-color: #c0c0c0 N
border-color color {1,4} border-color: green red white blue N
border-top-style none | solid | double | groove | ridge | inset | outset | dotted | dashed border-top-style: solid N
border-right-style none | solid | double | groove | ridge | inset | outset | dotted | dashed border-right-style: double N
border-bottom-style none | solid | double | groove | ridge | inset | outset | dotted | dashed border-bottom-style: groove N
border-left-style none | solid | double | groove | ridge | inset | outset | dotted | dashed border-left-style: none N
border-style none | solid | double | groove | ridge | inset | outset | dotted | dashed border-style : solid N
border-top border-width | border-style | border-color border-top : medium outset red N
border-right border-width | border-style | border-color border-right : thick inset maroon N
border-bottom border-width | border-style | border-color border-bottom : 10px ridge gray N
border-left border-width | border-style | border-color border-left : 1px groove red N
border border-width | border-style | border-color border : thin dashed blue N
float none | left | right float : right N
clear none | left | right | both clear : both N

Classification Properties

Property Valid Values Example Inherited?
display none | block | inline | list-item display : block N
list-style-type disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none list-style-type : upper-alpha Y
list-style-image url | none list-style-image :
url(imagename.jpg)		 Y
list-style-position inside | outside list-style-position : inside Y
list-style keyword || position || url list-style : square outside
url(imagename.gif)		 Y

Positioning Properties

Property Valid Values Example Applies to Inherited?
clip shape | auto clip : rect(0px 200px 200px 0px) all elements N
height length | auto height:200px <div>, <span>, and replaced elements N
left length | percentage | auto left : 0px absolutely and relatively positioned elements N
overflow visible | hidden | scroll | auto overflow : scroll all elements N
position absolute| relative | static position : absolute all elements N
top length | percentage | auto top : 0px absolutely and relatively positioned elements N
visibility visible | hidden | inherit visibility : visible all elements N
width length | percentage | auto width : 80% <div>, <span>, and replaced elements N
z-index auto | integer z-index : -1 absolutely and relatively positioned elements N

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 (mouse-over value name to see the effect) auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help { cursor: crosshair } Y
active, hover, link, visited n/a a:hover { color : red } Y
first-letter, first-line any font manipulating declaration p:first-letter {
float : left; color : blue }
.		 N