CSS Properties Examples

These pages show some of the effects that you can produce by manipulating the CSS properties of the parts of your document. Not all CSS level 2 properties are covered, and some of the properties are from CSS level 1.

background-color

Set the background color of this area as:

Hex value # and press TAB, or...

rgb( , , and click ) or...

as system color:

background-image, background-repeat, background-attachment, background-position

Set the background image for this section to: None W3C logo Orange mesh

Set background repeat to: repeat repeat-x repeat-y no-repeat

Set background attachment to: fixed scroll

Specify position by number and length units (px, in, etc.) ,
or by horizontal position: and vertical position:

border-color, border-width, border-style

For widths, you may use a length (such as 3px) or one of thin, medium, and thick.

For colors, please use a hex value with a preceding #, such as #ffffcc, or a color name, such as fuchsia.

Note: in Mozilla 14, the borders may not always update immediately. If you scroll up and then down again, they will replot.

color width style
top
left
bottom
right

clip, overflow

W3 Consortium logo This section contains a fairly large amount of text, so that we can see the effects of clipping. A clipping region defines what portion of an element's rendered content is visible. By default, the clipping region has the same size and shape as the element's box(es). However, the clipping region may be modified by the 'clip' property. The 'clip' property applies to elements that have an 'overflow' property with a value other than 'visible'.
Set clip area to:
Auto
rectangle specified by these lengths [press TAB to update]:
top: left: bottom: right:
Text outside clip area should:

cursor

Select cursor type for this area, then move the cursor around. If you move it outside this area, it will resume its normal shape.

Index CSS Properties Examples (2)