CodeKicks.com
Focus on Microsoft Technologies - Tutorials, Articles, Code Samples.

Thursday, August 24, 2006

CSS Properties

Font Properties

PropertyValid ValuesExampleInherited?
font-family[font name or type]font-family: Verdana, Arial;Y
font-stylenormal | italicfont-style:italic;Y
font-variantnormal | small-capsfont-variant:small-caps;Y
font-weightnormal | boldfont-weight:bold;Y
font-size[ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentage | lengthfont-size:12pt;Y
font[ font-style || font-variant || font-weight ] ? font-size [ / line-height ] ? font-familyfont: bold 12pt Arial;Y

- Color and Background Properties

PropertyValid ValuesExampleInherited?
colorcolor color: redY
background-colorcolor | transparent background-color: yellowN*
background-imageurl | none background-image: url(house.jpg)N*
background-repeatrepeat | repeat-x | repeat-y | no-repeat background-repeat: no-repeatN*
background-attachmentscroll | fixed background-attachment: fixedN*
background-position[ position | length ] | {1,2} | [ top | center | bottom ] || [ left | center | right ]background-position: top centerN*
background transparent | color || url || repeat || scroll || positionbackground: silver url(house.jpg) repeat-yN*

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

- Text Properties

PropertyValid ValuesExampleInherited?
letter-spacingnormal | lengthletter-spacing:5ptY
text-decorationnone | underline | overline | line-throughtext-decoration:underlineN
vertical-alignsub | super | vertical-align:subN
text-transformcapitalize | uppercase | lowercase | nonetext-transform:lowercaseN
text-alignleft | right | center | justifytext-align:centerN
text-indentlength | percentagetext-indent:25pxN
line-heightnormal | number | length | percentageline-height:15ptN

- Box Properties

PropertyValid ValuesExampleInherited?
margin-toplength | percentage | automargin-top:5pxN
margin-rightlength | percentage | automargin-right:5pxN
margin-bottomlength | percentage | automargin-bottom:1emN
margin-leftlength | percentage | automargin-left:5ptN
marginlength | percentage | auto {1,4}margin: 10px 5px 10px 5pxN
padding-toplength | percentagepadding-top:10%N
padding-rightlength | percentagepadding-right:15pxN
padding-bottomlength | percentagepadding-bottom:1.2emN
padding-leftlength | percentagepadding-left:10pt; }N
paddinglength | percentage {1,4}padding: 10px 10px 10px 15pxN
border-top-widththin | medium | thick | length border-top-width:thinN
border-right-widththin | medium | thick | length border-right-width:mediumN
border-bottom-widththin | medium | thick | lengthborder-bottom-width:thickN
border-left-widththin | medium | thick | length border-left-width:15pxN
border-widththin | medium | thick | length {1,4}border-width: 3px 5px 3px 5px N
border-top-colorcolor border-top-color:navajowhiteN
border-right-colorcolorborder-right-color:whitesmokeN
border-bottom-colorcolorborder-bottom-color:blackN
border-left-colorcolorborder-left-color:#C0C0C0N
border-colorcolor {1,4} border-color: green red white blue; } N
border-top-stylenone | solid | double | groove | ridge | inset | outset border-top-style:solidN
border-right-stylenone | solid | double | groove | ridge | inset | outset border-right-style:doubleN
border-bottom-stylenone | solid | double | groove | ridge | inset | outset border-bottom-style:grooveN
border-left-stylenone | solid | double | groove | ridge | inset | outset border-left-style:noneN
border-stylenone | solid | double | groove | ridge | inset | outset border-style:ridge; }N
border-topborder-width | border-style | border-color border-top: medium outset redN
border-rightborder-width | border-style | border-color border-right: thick inset maroonN
border-bottomborder-width | border-style | border-color border-bottom: 10px ridge grayN
border-leftborder-width | border-style | border-color border-left: 1px groove redN
borderborder-width | border-style | border-color border: thin solid blueN
floatnone | left | right float:noneN
clear none | left | right | both clear:leftN

- Classification Properties

PropertyValid ValuesExampleInherited?
displaynone | block | inline | list-itemdisplay:noneN
list-style-typedisk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | nonelist-style-type:upper-alphaY
list-style-imageurl | none list-style-image:url(icFile.gif)Y
list-style-positioninside | outsidelist-style-position:insideY
list-stylekeyword || position || url list-style: square outside url(icFolder.gif)Y

- Positioning Properties

PropertyValid ValuesExampleApplies toInherited?
clipshape | auto clip:rect(0px 200px 200px 0px)all elementsN
heightlength | autoheight:200pxDIV, SPAN and replaced elementsN
leftlength | percentage | autoleft:0pxabsolutely and relatively positioned elementsN
overflowvisible | hidden | scroll | autooverflow:scroll all elementsN
positionabsolute| relative | static position:absoluteall elementsN
toplength | percentage | autotop:0pxabsolutely and relatively positioned elementsN
visibilityvisible | hidden | inheritvisibility:visibleall elementsN
widthlength | percentage | autowidth:80%DIV, SPAN and replaced elementsN
z-indexauto | integer z-index:-1absolutely and relatively positioned elementsN

- Printing Properties

PropertyValid ValuesExampleInherited?
page-break-beforeauto | always || left | right page-break-before:alwaysN
page-break-afterauto | always || left | rightpage-break-before:autoN

- Pseudo Classes

PropertyValid ValuesExampleInherited?
cursorauto | 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, visitedn/aa:hover { color:red; }Y
first-letter, first-lineany font manipulating declarationp:first-letter{
float:left;color:blue
}
.

Find more from JavaScript Kit

Post a Comment