CSS Reference
CSGNetwork FREE Source Code, Javascript Source, and Code Snippets!
CSGNetwork Custom Search
     Bookmark and Share
á
CSGNetwork
Snippets
Calculators
Top Free Apps
Home
Back



Right click this window and select "view source" in order to copy the source for this script.

CSS Reference (based on MSDN and WC3 CSS 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 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

- 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-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



Bookmark and Share
Registered® Trademark™ and Copyrightę 1973 - CSG, Computer Support Group, Inc. and CSGNetwork.Com All Rights Reserved