|
Property List
Choose a property for more information:
background  |
| Description: |
Gives you the possibility to place several
background-properties in one declaration. |
| Possible Values: |
-background-color- | -background-image- | -background-repeat- |
-background-attachment- | -background-position- |
| Example: |
body { background: #ff0000 }
body { background: #00FF00 url(stars.gif) no-repeat fixed top } |
| Support: |
NS 6.0, IE 4.0 |
| background-attachment |
| Description: |
Gives you the possibility to have the image to
scroll with the content or to have the image stay at the same place. |
| Possible Values: |
scroll | fixed |
| Example: |
body { background-attachment: fixed } |
| Support: |
NS 6.0, IE 4.0 |
| background-color |
| Description: |
Defines the color of the background. |
| Possible Values: |
-color- | transparent |
| Example: |
body { background-color: red }
body { background-color: #ff0000 } |
| Support: |
NS 4.0, IE 4.0 |
| background-image |
| Description: |
Defines the image of the background. |
| Possible Values: |
-url- | none |
| Example: |
body { background-image: url(/images/backg.gif) }
body { background-image: url(http://www.url.nl/images/bg.gif) } |
| Support: |
NS 4.0, IE 4.0 |
| background-position |
| Description: |
Defines the starting position of the image. |
| Possible Values: |
top left | top center | top right | center left | center center |
center right | bottom left | bottom center | bottom right |
x-% y-% | x-pos y-pos |
| Example: |
body { background-position: top left) }
body { background-position: 0% 0%) }
body { background-position: 10px 10px) } |
| Support: |
NS 6.0, IE 4.0 |
| background-repeat |
| Description: |
Gives you the possibility to repeat an image or
don't repeat it. |
| Possible Values: |
repeat | repeat-x | repeat-y | no-repeat |
| Example: |
body { background-repeat: repeat-x } |
| Support: |
NS 4.0, IE 4.0 |
| border |
| Description: |
Gives you the possibility to place several
border-properties in one declaration. |
| Possible Values: |
-border-width- | -border-style- | -border-color- |
| Example: |
img { border: thin solid #00FF00 }
div { border: dotted #FF0000 } |
| Support: |
NS 4.0, IE 4.0 |
| border-bottom |
| Description: |
Gives you the possibility to place several
border-bottom-properties in one declaration. |
| Possible Values: |
-border-bottom-width- | -border-style- | -border-color- |
| Example: |
table { border-bottom: thin solid #00FF00 }
span { border-bottom: dotted #FF0000 } |
| Support: |
NS 6.0, IE 4.0 |
| border-bottom-color |
| Description: |
Defines the color of the bottom border. |
| Possible Values: |
-color- | transparent |
| Example: |
table { border-bottom-color: #ff0000 }
table { border-bottom-color: red } |
| Support: |
NS 6.0, IE 4.0 |
| border-bottom-style |
| Description: |
Defines the style of the bottom border. |
| Possible Values: |
none | dotted | dashed | solid | double | groove | ridge | inset | outset |
| Example: |
table { border-bottom-style: dashed } |
| Support: |
NS 6.0, IE 4.0 |
| border-bottom-width |
| Description: |
Defines the thickness of the bottom border. |
| Possible Values: |
thin | medium | thick | -thickness- |
| Example: |
table { border-bottom-width: thin }
table { border-bottom-width: 0.5px } |
| Support: |
NS 4.0, IE 4.0 |
| border-collapse |
| Description: |
Defines the border pattern of a table. |
| Possible Values: |
separate (white space between cells) | collapse (no
white space) |
| Example: |
table { border-collapse: separate } |
| Support: |
IE 5.0 |
| border-color |
| Description: |
Defines the color of the borders. |
| Possible Values: |
-color- | transparent |
| Example: |
table { border-color: #ff0000 }
table { border-color: #ff0000 #ffff00 #ff00ff #0000ff} |
| Support: |
NS 6.0, IE 4.0 |
| border-left |
| Description: |
Gives you the possibility to place several
border-left-properties in one declaration. |
| Possible Values: |
-border-left-width- | -border-style- | -border-color- |
| Example: |
table { border-left: thin solid #00FF00 }
span { border-left: dotted #FF0000 } |
| Support: |
NS 6.0, IE 4.0 |
| border-left-color |
| Description: |
Defines the color of the left border. |
| Possible Values: |
-color- | transparent |
| Example: |
table { border-left-color: #ff0000 }
table { border-left-color: red } |
| Support: |
NS 6.0, IE 4.0 |
| border-left-style |
| Description: |
Defines the style of the left border. |
| Possible Values: |
none | dotted | dashed | solid | double | groove | ridge | inset | outset |
| Example: |
table { border-left-style: dashed } |
| Support: |
NS 6.0, IE 4.0 |
| border-left-width |
| Description: |
Defines the thickness of the left border. |
| Possible Values: |
thin | medium | thick | -thickness- |
| Example: |
table { border-left-width: thin }
table { border-left-width: 0.5px } |
| Support: |
NS 4.0, IE 4.0 |
| border-right |
| Description: |
Gives you the possibility to place several
border-right-properties in one declaration. |
| Possible Values: |
-border-right-width- | -border-style- | -border-color- |
| Example: |
table { border-right: thin solid #00FF00 }
span { border-right: dotted #FF0000 } |
| Support: |
NS 6.0, IE 4.0 |
| border-right-color |
| Description: |
Defines the color of the right border. |
| Possible Values: |
-color- | transparent |
| Example: |
table { border-right-color: #ff0000 }
table { border-right-color: red } |
| Support: |
NS 6.0, IE 4.0 |
| border-right-style |
| Description: |
Defines the style of the right border. |
| Possible Values: |
none | dotted | dashed | solid | double | groove | ridge | inset | outset |
| Example: |
table { border-right-style: dashed } |
| Support: |
NS 6.0, IE 4.0 |
| border-right-width |
| Description: |
Defines the thickness of the right border. |
| Possible Values: |
thin | medium | thick | -thickness- |
| Example: |
table { border-right-width: thin }
table { border-right-width: 0.5px } |
| Support: |
NS 4.0, IE 4.0 |
| border-spacing |
| Description: |
Defines the distance between the cells (by separate
table-model). |
| Possible Values: |
-length- |
| Example: |
table { border-spacing: 15px } |
| Support: |
|
| border-style |
| Description: |
Defines the style of the borders. |
| Possible Values: |
none | dotted | dashed | solid | double | groove | ridge | inset | outset |
| Example: |
table { border-style: dotted }
table { border-style: dotted dashed }
table { border-style: dotted dashed solid }
table { border-style: dotted dashed solid groove } |
| Support: |
NS 6.0, IE 4.0 |
| border-top |
| Description: |
Gives you the possibility to place several
border-top-properties in one declaration. |
| Possible Values: |
-border-top-width- | -border-style- | -border-color- |
| Example: |
table { border-top: thin solid #00FF00 }
span { border-top: dotted #FF0000 } |
| Support: |
NS 6.0, IE 4.0 |
| border-top-color |
| Description: |
Defines the color of the top border. |
| Possible Values: |
-color- | transparent |
| Example: |
table { border-top-color: #ff0000 }
table { border-top-color: red } |
| Support: |
NS 6.0, IE 4.0 |
| border-top-style |
| Description: |
Defines the style of the top border. |
| Possible Values: |
none | dotted | dashed | solid | double | groove | ridge | inset | outset |
| Example: |
table { border-top-style: dashed } |
| Support: |
NS 6.0, IE 4.0 |
| border-top-width |
| Description: |
Defines the thickness of the top border. |
| Possible Values: |
thin | medium | thick | -thickness- |
| Example: |
table { border-top-width: thin }
table { border-top-width: 0.5px } |
| Support: |
NS 6.0, IE 4.0 |
| border-width |
| Description: |
Defines the thickness of the borders. |
| Possible Values: |
thin | medium | thick | -thickness- |
| Example: |
table { border-width: thin }
table { border-width: thin medium }
table { border-width: thin medium thick }
table { border-width: thin medium thick none } |
| Support: |
NS 4.0, IE 4.0 |
| bottom |
| Description: |
Defines the distance at the bottom between an
element and the element from which it inherits (works only with
'position: absolute'). |
| Possible Values: |
auto | -length- | -percentage- |
| Example: |
div { position: absolute; bottom: 10px } |
| Support: |
NS 6.0, IE 5.0 |
| caption-side |
| Description: |
Defines the position of the HTML caption-element. |
| Possible Values: |
top | bottom | left | right |
| Example: |
caption { caption-side: right } |
| Support: |
NS 6.0 |
| clear |
| Description: |
Images and others are called floating elements. The
clear property defines if it's allowed to have floating elements on
the side. So clear:left makes sure that an element is set to the
bottom if there is on the left a floating element. |
| Possible Values: |
left | right | both | none |
| Example: |
div { clear:left } |
| Support: |
NS 4.0, IE 4.0 |
| clip |
| Description: |
Defines the shape and size when an image is larger
then the element where it's going to be put. |
| Possible Values: |
auto | -shape- |
| Example: |
img { clip: rect( 5px, 20px, 10px, 5px) } |
| Support: |
NS 6.0, IE 4.0 |
| cursor |
| Description: |
Defines the type of cursor that needs to be shown. |
| Possible Values: |
auto | -url- | default | crosshair | help | pointer | move | text | e-resize |
ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize |
| Example: |
div{ cursor: help }
div{ cursor: url("cross.cur"), crosshair } |
| Support: |
NS 6.0, IE 4.0 |
| color |
| Description: |
Defines the color of the foreground (text color,
etc.). |
| Possible Values: |
-name- | -#rgb- | -#rrggbb- | -rgb(nr, nr, nr)- |
-rgb(x%, x%, x%)- |
| Example: |
h1 { color: red }
h2 { color: #f00 }
h3 { color: #ff0000 } |
| Support: |
NS 4.0, IE 3.0 |
| direction |
| Description: |
Defines the direction of the text. |
| Possible Values: |
ltr | rtl |
| Example: |
div { direction: rtl } |
| Support: |
NS 6.0, IE 5.0 |
| display |
| Description: |
Defines how an image need to be showed. |
| Possible Values: |
block | inline | list-item | none |
| Example: |
p { display: block }
li { display: list-item }
image { display: none } |
| Support: |
NS 4.0, IE 4.0 |
| empty-cells |
| Description: |
Defines if empty cells in a table needs to get
borders (only by separated borders model). |
| Possible Values: |
show | hide |
| Example: |
table { empty-cells: hide } |
| Support: |
NS 6.2 |
| float |
| Description: |
Defines where an element is put. |
| Possible Values: |
left | right | none |
| Example: |
img { float: left } |
| Support: |
NS 4.0, IE 4.0 |
| font |
| Description: |
Gives you the possibility to place several
font-properties in one declaration. |
| Possible Values: |
-font-style- | -font-variant- | -font-weight- | -font-size- | -line-height- |
-font-family- |
| Example: |
p { font: italic bold }
p { font: italic normal bold 12px/14px verdana } |
| Support: |
NS 4.0, IE 4.0 |
| font-family |
| Description: |
Defines the font type of the text. |
| Possible Values: |
-family-name- (Example: Verdana) | -generic-family- (Example: serif) |
| Example: |
body { font-family: Verdana } |
| Support: |
NS 4.0, IE 3.0 |
| font-size |
| Description: |
Defines the size of the font type. |
| Possible Values: |
xx-small | x-small | small | medium | large |x-large | xx-large | smaller | larger | -size- | -percentage- |
| Example: |
p { font-size: x-small }
p { font-size: 10px } |
| Support: |
NS 4.0, IE 3.0 |
| font-size-adjust |
| Description: |
The ratio between the size of a font type
(font-size) and the x-size. The ratio is a number. This number shall
we define via the font-size-adjust property. The higher this number by
small font types is, the better readable they become. |
| Possible Values: |
none | -number- |
| Example: |
p { font-size-adjust: 0.58 } |
| Support: |
|
| font-stretch |
| Description: |
Defines the condensation or expansion of the font
type. |
| Possible Values: |
normal | wider | narrower | ultra-condensed |
extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded |
| Example: |
h3 { font-stretch: ultra-expanded } |
| Support: |
|
| font-style |
| Description: |
Defines the style of the font type. |
| Possible Values: |
normal | italic | oblique |
| Example: |
p { font-style: italic } |
| Support: |
NS 4.0, IE 4.0 |
| font-variant |
| Description: |
Shows the font type in small capitals or normal. |
| Possible Values: |
normal | small-caps |
| Example: |
p { font-variant: small-caps } |
| Support: |
NS 6.0, IE 4.0 |
| font-weight |
| Description: |
Defines the weight of the font type. |
| Possible Values: |
normal | bold | bolder | lighter |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
| Example: |
p { font-weight: bold }
p { font-weight: 400 } |
| Support: |
NS 4.0, IE 4.0 |
| height |
| Description: |
Defines the height of an element (text, image,
etc.). |
| Possible Values: |
auto | -height- | -percentage- |
| Example: |
img { height: 250px } |
| Support: |
NS 6.0, IE 4.0 |
| left |
| Description: |
Defines the left distance between an element and
the element from which it inherits (works only with 'position:
absolute'). |
| Possible Values: |
auto | -length- | -percentage- |
| Example: |
div { position: absolute; left: 10px } |
| Support: |
NS 4.0, IE 4.0 |
| letter-spacing |
| Description: |
Increases or decreases the space between the
letters. |
| Possible Values: |
normal | -length- |
| Example: |
p { letter-spacing: 10px }
p { letter-spacing: -1px } |
| Support: |
NS 6.0, IE 4.0 |
| line-height |
| Description: |
Defines the distance between two lines of text. |
| Possible Values: |
normal | -number- | -length- | -percentage- |
| Example: |
div { line-height: 1.4 }
div { line-height: 16pt }
div { line-height: 120% } |
| Support: |
NS 4.0, IE 4.0 |
| list-style |
| Description: |
Gives you the possibility to place several
list-style-properties in one declaration. |
| Possible Values: |
-list-style-type- | -list-style-position- | -list-style-image- |
| Example: |
ul { list-style: disc outside } |
| Support: |
NS 6.0, IE 4.0 |
| list-style-image |
| Description: |
Gives you the possibility to use an image as list
style. |
| Possible Values: |
-url- | none |
| Example: |
ol { list-style-image: url(enumeration.gif); list-style-type: circle }
(list-style-type is mentioned just in case for when the image isn't
loaded) |
| Support: |
NS 6.0, IE 4.0 |
| list-style-position |
| Description: |
Possibility of leap in by a list. |
| Possible Values: |
inside | outside |
| Example: |
ol { list-style-position: inside} |
| Support: |
NS 6.0, IE 4.0 |
| list-style-type |
| Description: |
Defines the type of list style. |
| Possible Values: |
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none |
| Example: |
ol { list-style-type: decimal } (1, 2, 3, 4, …)
ol { list-style-type: upper-alpha } (A, B, C, D, …) |
| Support: |
NS 4.0, IE 4.0 |
| margin |
| Description: |
Gives you the possibility to place several
margin-properties in one declaration. |
| Possible Values: |
-margin-top- | -margin-right- | -margin-bottom- | -margin-left- |
| Example: |
div { margin: 15px }
div { margin: 15px 20px 10 px auto} |
| Support: |
NS 4.0, IE 4.0 |
| margin-bottom |
| Description: |
Defines the bottom margin of an element. |
| Possible Values: |
auto | -length- | -percentage- |
| Example: |
div { margin-bottom: 15px } |
| Support: |
NS 4.0, IE 4.0 |
| margin-left |
| Description: |
Defines the left margin of an element. |
| Possible Values: |
auto | -length- | -percentage- |
| Example: |
div { margin-left: 15px } |
| Support: |
NS 4.0, IE 3.0 |
| margin-right |
| Description: |
Defines the right margin of an element. |
| Possible Values: |
auto | -length- | -percentage- |
| Example: |
div { margin-right: 15px } |
| Support: |
NS 4.0, IE 3.0 |
| margin-top |
| Description: |
Defines the top margin of an element. |
| Possible Values: |
auto | -length- | -percentage- |
| Example: |
div { margin-top: 15px } |
| Support: |
NS 4.0, IE 3.0 |
| max-height |
| Description: |
Defines the maximum height of an element. |
| Possible Values: |
none | -height- | -percentage- |
| Example: |
div { max-height: 150px } |
| Support: |
|
| max-width |
| Description: |
Defines the maximum width of an element. |
| Possible Values: |
none | -width- | -percentage- |
| Example: |
div { max-width: 200px } |
| Support: |
|
| min-height |
| Description: |
Defines the minimum height of an element. |
| Possible Values: |
-height- | -percentage- |
| Example: |
div { min-height: 150px } |
| Support: |
|
| min-width |
| Description: |
Defines the minimum width of an element. |
| Possible Values: |
-width- | -percentage- |
| Example: |
div { min-width: 200px } |
| Support: |
|
| outline |
| Description: |
Gives you the possibility to place several
outline-properties in one declaration (the outline is situated outside
the border margin). |
| Possible Values: |
-outline-color- | -outline-style- | -outline-width- |
| Example: |
button { outline: red dashed thick } |
| Support: |
|
| outline-color |
| Description: |
Defines the color of the outline. |
| Possible Values: |
-color- | invert |
| Example: |
border { outline-color: #ff0000 } |
| Support: |
|
| outline-style |
| Description: |
Defines the style of the outline. |
| Possible Values: |
none | dotted | dashed | solid | double | groove | ridge | inset | outset |
| Example: |
button { outline-style: dotted } |
| Support: |
|
| outline-width |
| Description: |
Defines the width of the outline. |
| Possible Values: |
thin | medium | thick | none | -thickness- |
| Example: |
button { outline-width: thin } |
| Support: |
|
| overflow |
| Description: |
Defines what happens when the content of an element
exceeds his surroundings. |
| Possible Values: |
auto | visible | hidden | scroll |
| Example: |
p { overflow: scroll } |
| Support: |
|
| padding |
| Description: |
Gives you the possibility to place several
padding-properties in one declaration. |
| Possible Values: |
-padding-top- | -padding-right- | -padding-bottom- | -padding-left- |
| Example: |
div { padding: 15px }
div { padding: 15px 20px 10px auto} |
| Support: |
NS 4.0, IE 4.0 |
| padding-bottom |
| Description: |
Defines the bottom padding. |
| Possible Values: |
-length- | -percentage- |
| Example: |
div { padding-bottom: 15px } |
| Support: |
NS 4.0, IE 4.0 |
| padding-left |
| Description: |
Defines the left padding. |
| Possible Values: |
-length- | -percentage- |
| Example: |
div { padding-left: 15px } |
| Support: |
NS 4.0, IE 4.0 |
| padding-right |
| Description: |
Defines the right padding. |
| Possible Values: |
-length- | -percentage- |
| Example: |
div { padding-right: 15px } |
| Support: |
NS 4.0, IE 4.0 |
| padding-top |
| Description: |
Defines the top padding. |
| Possible Values: |
-length- | -percentage- |
| Example: |
div { padding-top: 15px } |
| Support: |
NS 4.0, IE 4.0 |
| position |
| Description: |
Defines the way an element is placed. |
| Possible Values: |
static | relative | absolute | fixed |
| Example: |
div { position: absolute; left: 20px; top: 20px } |
| Support: |
NS 4.0, IE 4.0 |
| right |
| Description: |
Defines the distance on the right between an
element and the element from which it inherits (works only with
'position: absolute'). |
| Possible Values: |
auto | -length- | -percentage- |
| Example: |
div { position: absolute; right: 100px } |
| Support: |
IE 5.0 |
| table-layout |
| Description: |
Defines the way on which a table is generated. |
| Possible Values: |
auto | fixed |
| Example: |
table { table-layout: fixed } |
| Support: |
NS 6.0, IE 5.0 |
| text-align |
| Description: |
Defines the aligning of a text in an element. |
| Possible Values: |
left | right | center | justify |
| Example: |
p { text-align: justify } |
| Support: |
NS 4.0, IE 4.0 |
| text-decoration |
| Description: |
Adds decoration to the text. |
| Possible Values: |
none | underline | overline | line-trough | blink |
| Example: |
div { text-decoration: underline } |
| Support: |
NS 4.0, IE 4.0 |
| text-indent |
| Description: |
Defines the indention of the first line of text. |
| Possible Values: |
-length- | -percentage- |
| Example: |
p { text-indent: 20px } |
| Support: |
NS 4.0, IE 4.0 |
| text-shadow |
| Description: |
Defines the shadow of the text. |
| Possible Values: |
none | -color- | -length- |
| Example: |
span { text-shadow: black 0px 0px 5px } (color, x-offset, y-offset, blur)
span { text-shadow: red -10px } |
| Support: |
NS 4.0, IE 4.0 |
| text-transform |
| Description: |
Defines the transformation of the letters in an
element (Example: from capitols, to lowercase). |
| Possible Values: |
capitalize | uppercase | lowercase | none |
| Example: |
p { text-transform: capitalize } (first letter a
capitol)
p { text-transform: uppercase } (everything in capitols)
p { text-transform: lowercase } (everything in lowercase) |
| Support: |
NS 4.0, IE 4.0 |
| top |
| Description: |
Defines the top distance between an element and the
element from which it inherits (works only with 'position: absolute'). |
| Possible Values: |
auto | -length- | -percentage- |
| Example: |
div { position: absolute; top: -10px }
div { position: absolute; top: 10px } |
| Support: |
NS 4.0, IE 4.0 |
| vertical-align |
| Description: |
Defines the vertical alignment of an element. |
| Possible Values: |
baseline | sub | super | top | text-top | middle | bottom | text-bottom |
-length- | -percentage- |
| Example: |
img { vertical-align: top } |
| Support: |
NS 4.0, IE 4.0 |
| visibility |
| Description: |
Defines if an element must be visible or hidden. |
| Possible Values: |
visible | hidden | collapse (makes a column or row
invisible in a table) |
| Example: |
p { visibility: hidden } |
| Support: |
NS 6.0, IE 4.0 |
| white-space |
| Description: |
Defines how the white space in an element must be
treated. |
| Possible Values: |
normal | pre | nowrap |
| Example: |
p { white-space: normal } |
| Support: |
NS 4.0, IE 5.5 |
| width |
| Description: |
Defines the width of an element. |
| Possible Values: |
auto | -width- | -percentage- |
| Example: |
div { width: 400px } |
| Support: |
NS 4.0, IE 4.0 |
| word-spacing |
| Description: |
Increases or decreases the space between words. |
| Possible Values: |
normal | -length- |
| Example: |
p { word-spacing: 10px }
p { word-spacing: -1px } |
| Support: |
NS 6.0, IE 6.0 |
| z-index |
| Description: |
Defines the arrangement by the pile up of elements.
The higher the number, the higher situated. |
| Possible Values: |
auto | -number- |
| Example: |
img { z-index: 2 } |
| Support: |
NS 6.0, IE 4.0 |
|
