Create IT Simple - Webdesign, Hosting and Domains
www.

Home
Shopping Cart
Services
spacer
Support Section
spacer
Shopping
spacer
Other
spacer
Client Login
Email Address:
Password:
 
Click here to register with us
spacer
New Template Report
 
Subscribe to our new web templates report and be the first to know about our newly added products!
Enter Email Address:
spacer
spacer

CSS Reference Sheet

Last updated: October 21st, 2001

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

 

Back to Business Resources

 spacer
Featured Website Templates
 
 
 

 

 Return to topReturn to top
Copyright © 2004-2009 Create IT Simple. All Rights Reserved.
Create IT Simple - Website Templates | Web Site Templates | Design | Hosting