Approved Properties and Values

 

CSS Reference

XHTML (eXtensible HyperText Markup Language) Complete CSS Reference 21 OCT 2001 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 color color: red Y background-color color | transparent background-color: yellow N* background-image url | none background-image: url(house.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(house.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: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-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:navajowhite N border-right-color color border-right-color:whitesmoke 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 border-top-style:solid N border-right-style none | solid | double | groove | ridge | inset | outset border-right-style:double N border-bottom-style none | solid | double | groove | ridge | inset | outset border-bottom-style:groove N border-left-style none | solid | double | groove | ridge | inset | outset border-left-style:none N border-style none | solid | double | groove | ridge | inset | outset border-style:ridge; } 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 solid blue N 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-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(icFile.gif) Y list-style-position inside | outside list-style-position:inside Y list-style keyword || position || url list-style: square outside url(icFolder.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 Break Properties (including for page breaks when printing)  -- (THESE REPLACE deprecated page-break-before & page-break-after properties) Property Valid Values Example Inherited? break-before auto | avoid | always | all || page | avoid-page | left | right | recto | verso  break-before: page  N break-after auto | avoid | always | all || page | avoid-page | left | right | recto | verso  break-after: always N Pseudo Classes Property Valid Values Example Inherited? cursor 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:hand; } 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