The following table lists Cascading Style Sheet attributes and values. The attribute names are shown in the formats used in XHTML stylesheets and in reference to the Document Object Model (DOM).
Styles are applied to an XHTML element in the embedded format,
<style>and in the inline format,
<tag style="property:value [; property:value]... " >Styles are applied through scripting by referencing the DOM format,
[document.all.]id.style.property = "value"
| CSS/DOM Reference | Values | Description |
|---|---|---|
| background-attachment backgroundAttachment |
fixed scroll |
Sets how a background image is attached to the document. |
| background-color backgroundColor |
colorname #hexvalue rgb(r g b) rgb(r% g% b%) |
Sets the color of the background for the element. |
| background-image backgroundImage |
url(url) none |
Sets the background image for an element. |
| background-position backgroundPosition |
left% top% left top left|center|right top|center|bottom |
Sets the location of the left and top edges of the background image for an element as percentages or measurements. Can use a pair of keywords separated by a space. |
| background-repeat backgroundRepeat |
no-repeat repeat repeat-x repeat-y |
Sets whether the background image repeats horizontally, vertically, in both directions, or not at all. |
| border-color borderColor border-top-color borderTopColor border-right-color borderRightColor border-bottom-color borderBottomColor border-left-color borderLeftColor |
colorname #hexvalue rgb(r g b) rgb(r% g% b%) |
Sets the color of all borders or a single border edge of an element. |
| border-style borderStyle border-top-style borderTopStyle border-right-style borderRightStyle border-bottom-style borderBottomStyle border-right-style borderRightStyle |
dashed dotted double groove inset none outset ridge solid |
Sets the style of all borders or a single border edge of an element. |
| border-width borderWidth border-top-width borderTopWidth border-right-width borderRightWidth border-bottom-width borderBottomWidth border-right-width borderRightWidth |
thin medium thick width |
Sets the width of all borders or a single border edge of an element using a keyword or a width measurement. |
| border-collapse borderCollapse |
collapse separate |
Sets whether adjacent table cells are rendered separately or merged into a single border. |
| caption-side captionSide |
top bottom |
Positions a table caption above or below a table. |
| cell-spacing cellSpacing |
h [v] none |
Sets the spacing between cells of a table. A single measurement applies both horizontal and vertical space. |
| clear clear |
both left right none |
Sets whether the element is positioned in-line with a floating element or is positioned at the next clear line of the document. |
| color color |
colorname #hexvalue rgb(r g b) rgb(r% g% b% |
Sets the text color of the element. |
| cursor cursor |
auto crosshair default help move pointer text wait n-resize ne-resize e-resize se-resize s-resize sw-resize w-resize nw-resize |
Sets the shape of the cursor when positioned on the element. |
| float float |
left right none |
Sets whether the element floats to permit wrapping of accompanying content. |
| font-family fontFamily |
fontfamilyname [,fontfamilyname]... serif sans-serif cursive fantasy monospace |
Sets one or more font names or generic name for the element's text. |
| font-size fontSize |
n px n % xx-small x-small small medium large x-large xx-large |
Sets the font size for the element's text. |
| font-style fontStyle |
normal italic oblique |
Sets the font style for the element's text. |
| font-variant fontVariant |
normal small-caps |
Sets the font variant for the element's text. |
| font-weight fontWeight |
normal bold bolder lighter 100 - 900 |
Sets the font weight for the element's text. |
| height height |
auto n px n % |
Sets the height of an element. |
| left left |
auto n px n % |
For a positioned element, sets its left edge relative to container element. |
| letter-spacing letterSpacing |
normal n px auto |
Sets the horizontal letter spacing of an element's text. Measurement can be negative. |
| line-height lineHeight |
normal n n px n % |
Sets the line height of an element's text. A number serves as a multiplier of the current font size; a measurement is an actual height value; a percentage is a multiplier of the current font size. |
| list-style-image listStyleImage |
none url(url) |
Sets the image used as the bullet character for list items. |
| list-style-position listStylePosition |
inside outside |
Sets the alignment of wrapped text for a list item. Inside aligns wrapped text with the item marker; outside aligns wrapped text with the beginning text position. |
| list-style-type listStyleType |
circle disc square decimal lower-alpha lower-roman upper-alpha upper-roman |
Sets the list item marker for unordered lists and for ordered lists. |
| margin margin margin-top marginTop margin-right marginRight margin-bottom marginBottom margin-left marginLeft |
auto n px n % |
Sets the amount of space that extends beyond the edges of an element. |
| padding padding padding-top paddingTop padding-right paddingRight padding-bottom paddingBottom padding-left paddingLeft |
auto n px n % |
Sets the amount of space surrounding the contents of an element. |
| position position |
relative fixed |
Sets the element's location in the document. Fixed positioning is relative to the top-left corner (0,0 pixel position) of the container element. |
| right right |
auto n px n % |
For a positioned element, sets its right edge relative to container element. |
| text-align textAlign |
left center right justify |
Sets the horizontal alignment of text within an element. |
| text-decoration textDecoration |
none blink line-through overline underline |
Sets the decoration of text within an element. |
| text-indent textIndent |
n px n % |
Sets the indention of text within an element. |
| text-shadow textShadow |
[color] hLen vLen rLen | Sets the drop shadow of text within an element. A color can be specified along with a set of horizontal, vertical, and radius blur lengths. |
| text-transform textTransform |
none captialize lowercase uppercase |
Sets the capitalization of text within an element. |
| top top |
n px n % auto |
For positioned elements, sets the location of the top of the element relative to its container element. |
| vertical-align verticalAlign |
bottom top baseline middle sub super text-bottom text-top |
Sets the vertical alignment of the contents of the element. |
| visibility visibility |
visible hidden inherit |
Controls whether the element is visible. Inherit takes on the visibility of the parent element. |
| width width |
n px n % auto |
Sets the width of the element. |
| word-spacing wordSpacing |
n px normal |
Sets the amount of spacing between words of the element. |
| z-index zIndex |
n auto |
For positioned elements, sets the stacking order of the element. Higher values position elements on top of elements with lower values. Otherwise, elements are stacked in the order in which they appear in the document. |
|
Filters style="filter:filtervalue(param1=value1 [param2=value2]...)" object.style.filter = "filtervalue (param1=value1 [param2=value2]...) |
||
| filter filter |
alpha() opacity=0-100, finishopacity=0-100, style=0|1|2|3, startX=h v, startY=h v, finishX=h v, finishY=h v |
Transparency level. The opacity and finishopacity parameters can be set from transparent (0) to opaque (100). The style parameter sets the opacity gradient shape: uniform (0), linear (1), radial (2), rectangular (3). The startX and startY parameters set the horizontal and vertical coordinates for opacity gradient start, and the finishX and finishY parameters set the horizontal and vertical coordinates for opacity gradient end. |
| blur() add=0|1, direction=0|45|90|135|180|225|270|315, strength=n |
Blur level. The add parameter specifies whether to add the original image to the blurred image (1) or to omit it (0). The direction parameter sets the angle of the blur: above (0), above-right (45), right (90), below-right (135), below (180), below-left (225), left (270), above-left (315). The strength parameter indicates the number of pixels for the blurred image to extend. | |
| chroma() color=#rrggbb |
Color transparency. The color parameter sets the hexadecimal triplet value of the color to be made transparent. | |
| dropShadow() color=#rrggbb, offx=n, offy=n, positive=0|1 |
Creates an offset shadow. The color parameter sets the hexadecimal color value for the drop shadow. The offx and offy parameters specify the number of pixels between the element and the drop shadow . The positive parameter specifies whether only positive pixels generate drop shadows (1) or transparent pixels as well (0). | |
| flipH() | Flips the element horizontally. | |
| flipV() | Flips the element vertically. | |
| glow() color=#rrggbb, strength=1-255 |
Adds radiance to outer edges. The color parameter sets the hexadecimal value of the color for the effect and the strength parameter sets the intensity (1 - 255). | |
| gray() | Removes colors from the element. | |
| invert() | Reverses the hue, saturation, and brightness levels. | |
| mask() color=#rrggbb |
Creates a transparent mask. The color parameter sets the hexadecimal value of the color applied to transparent regions. | |
| shadow() color=#rrggbb, direction=0|45|90|135|180|225|270|315 |
Displays the element as a solid silhouette. The color parameter sets the hexadecimal value of the color used for shadows and the direction parameter sets the angle of the shadow relative to the original image location: above (0), above-right (45), right (90), below-right (135), below (180), below-left (225), left (270), above-left (315). | |
| wave() add=0|1, freq=n, light=0-100, phase=0-100, strength=0-255 |
Renders the element with a sine wave distortion along the x-axis. The add parameter specifies whether to add the original image to the waved image (1) or not (0). The freq parameter sets the number of waves to be applied. The light parameter sets the light strength (0 - 100). The phase parameter sets the percentage offset for the sine wave (0 - 100). The strength parameter sets the wave intensity (0 - 255). | |
| xRay() | Renders only the edges of the element. | |
| blendTrans() duration=n |
Fades the element in and out. The duration parameter sets
the value in seconds of the fade. This style setting is used in conjunction
with scripting to apply the fade: HTML: style="filter:blendTrans(duration=3)" Javascript: object.style.filters.blendTrans.Apply() object.style.visibility = "visible" (or "hidden") object.style.filters.blendTrans.Play() |
|
| revealTrans() duration=n, transitionshape=n |
Sets the transition between hiding and showing an element. The
duration parameter sets the value in seconds of the fade.
The transitionshape parameter sets the transition type.
This style setting is used in conjunction with scripting to apply the transition: HTML: style="filter:revealTrans(duration=3)" Javascript: object.style.filters.revealTrans.Apply() object.style.visibility = "visible" (or "hidden") object.style.filters.revealTrans.Play() Transition shape values are: 0 - Box in 1 - Box out 2 - Circle in 3 - Circle out 4 - Wipe up 5 - Wipe down 6 - Wipe right 7 - Wipe left 8 - Vertical blinds 9 - Horizontal blinds 10 - Checkerboard across 11 - Checkerboard down 12 - Random dissolve 13 - Split vertical in 14 - Split vertical out 15 - Split horizontal in 16 - Split horizontal out 17 - Strips left down 18 - Strips left up 19 - Strips right down 20 - Strips right up 21 - Random bars horizontal 22 - Random bars vertical 23 - Random |
|