CSS Properties Examples (2)

float

This part of the text can be made to float.

This text will flow around the red-bordered area when it's floated. The property is cssFloat in JavaScript, because float is a reserved word.

The text in this <div> normally participates in flowing around the floating text unless its clear attribute is set appropriately. Note: The cssFloat property cannot be applied to text generated on the fly.

Make floating text: non-floating float to left float to right
Make subsequent text: non-clearing clear to left clear to right

font-size, font-family, font-style, font-weight, font-stretch, font-variant

There is an incredible number of font properties to choose from. Click below to see this particular section of text change.

Font size: By keyword: By number:

Set font family: by generic name: By name:

Font style: Font weight:

Font variant:

Font stretch:

line-height, letter-spacing, text-indent, text-align, vertical-align

This paragraph is designed to have word wrap so that you can see text-indent in action. This sentence exercises vertical alignment. When changing line-height and letter-spacing, you can use normal as input. If you put just a number for line-height (without a length like px or cm), that number will be multiplied by the current font size.

These short lines
show text align
in action.

Line height: Letter spacing: Text indent:
Text align: Vertical align:

list-style-type, list-style-image, list-position

As of Mozilla 14, list-style-image does not appear to work, so graphic bullets still aren't possible. List position does not work either.

  1. Item one
  2. Item two
    line two of item two
  3. Item three
List style type: List position:

text-decoration, text-transform, text-shadow

This text will let you see text effects such as underlining and overlining, and text shadows. In Mozilla 14, the blink effect, thankfully, does not work. Text shadows do not work either.
Decoration: Transform:
Text shadow color: X-offset: Y-offset: blur radius: