Complete CSS Reference

Page 1

Scripts | JavaScript Tutorials | JavaScript Reference | Applets | DHTML | Design | Forum | Freewarejava

JavaScript Kit CSS Reference (based on MSDN and WC3 CSS reference)
Last updated: October 21st, 2001

Search this site

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

- Font Properties
Property Valid Values Example font-family: Verdana, Arial; font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12pt; font: bold 12pt Arial; Inherited? Y Y Y Y Y Y

font-family [font name or type] font-style fontvariant fontweight font-size font normal | italic normal | small-caps normal | bold [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentage | length [ font-style || font-variant || font-weight ] ? font-size [ / line-height ] ? font-family

- Color and Background Properties

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

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

- Text Properties
Property letter-spacing text-decoration vertical-align text-transform text-align text-indent line-height Valid Values normal | length none | underline | overline | line-through sub | super | capitalize | uppercase | lowercase | none left | right | center | justify length | percentage normal | number | length | percentage Example letter-spacing:5pt text-decoration:underline vertical-align:sub text-transform:lowercase text-align:center text-indent:25px line-height:15pt Inherited? Y N N N N N N

- Box Properties
http://www.javascriptkit.com/dhtmltutors/cssreference.shtml 14/02/2006 00:44:25

Complete CSS Reference

Page 2

Property margin-top margin-right margin-bottom margin-left margin padding-top padding-right padding-bottom padding-left padding border-top-width border-right-width border-bottom-width border-left-width border-width border-top-color border-right-color border-bottom-color border-left-color border-color border-top-style border-right-style border-bottom-style border-left-style border-style border-top border-right border-bottom border-left border float clear

Valid Values length | percentage | auto length | percentage | auto length | percentage | auto length | percentage | auto length | percentage | auto {1,4} length | percentage length | percentage length | percentage length | percentage length | percentage {1,4} thin | medium | thick | length thin | medium | thick | length thin | medium | thick | length thin | medium | thick | length thin | medium | thick | length {1,4} color color color color color {1,4} none | solid | double | groove | ridge | inset | outset none | solid | double | groove | ridge | inset | outset none | solid | double | groove | ridge | inset | outset none | solid | double | groove | ridge | inset | outset none | solid | double | groove | ridge | inset | outset border-width | border-style | border-color border-width | border-style | border-color border-width | border-style | border-color border-width | border-style | border-color border-width | border-style | border-color none | left | right none | left | right | both

Example margin-top:5px margin-right:5px margin-bottom:1em margin-left:5pt margin: 10px 5px 10px 5px padding-top:10% padding-right:15px padding-bottom:1.2em padding-left:10pt; } padding: 10px 10px 10px 15px border-top-width:thin border-right-width:medium border-bottom-width:thick border-left-width:15px border-width: 3px 5px 3px 5px border-top-color:navajowhite border-right-color:whitesmoke border-bottom-color:black border-left-color:#C0C0C0 border-color: green red white blue; } border-top-style:solid border-right-style:double border-bottom-style:groove border-left-style:none border-style:ridge; } border-top: medium outset red border-right: thick inset maroon border-bottom: 10px ridge gray border-left: 1px groove red border: thin solid blue float:none clear:left

Inherited? N N N N N N N N N N N N N N N N N N N N N N N N N N N N N N N N

- Classification Properties
Property display list-style-type Valid Values none | block | inline | list-item disk | circle | square | decimal | lower-roman | upper-roman | loweralpha | upper-alpha | none Example display:none list-style-type:upper-alpha list-style-image:url(icFile.gif) Inherited? N Y Y

list-style-image url | none

http://www.javascriptkit.com/dhtmltutors/cssreference.shtml

14/02/2006 00:44:25

Complete CSS Reference list-styleposition list-style inside | outside keyword || position || url list-style-position:inside list-style: square outside url (icFolder.gif) Y Y

Page 3

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

- Printing Properties
Property page-break-before page-break-after Valid Values auto | always || left | right auto | always || left | right Example page-break-before:always page-break-before:auto Inherited? N N

- Pseudo Classes
Property cursor Valid Values auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help Example { cursor:hand; } a:hover { color:red; } p:first-letter{ float:left;color:blue } . Inherited? Y Y N

active, hover, link, n/a visited first-letter, firstline any font manipulating declaration

Scripts | JavaScript Tutorials | JavaScript Reference | Applets | DHTML | Design | Forum | Freewarejava
CopyRight 1998-2002 JavaScript Kit

http://www.javascriptkit.com/dhtmltutors/cssreference.shtml

14/02/2006 00:44:25