Style sheet properties - Font and text properties

font-family: font-family: arial
font-family: arial, sans-serif
font-family: arial, helvetica, sans-serif
font-size: font-size: 16pt
font-size: larger
font-size: x-large (values: xx-small. x-small, small, medium, large)
font-size: 125%
font-style: font-style: italic
font-variant: font-variant: small-caps
font-weight: font-weight: bold (controls the boldness of you font)
font-weight: lighter
font-weight: 900
font: a combination the above 5 properties font: 24pt arial
font: 16pt/18pt arial
font: italic bold 32pt arial, sans-serif
letter-spacing: letter-spacing: 0.5em
line-height: line-height: 1.75em (value must be greater than 0 - value < 1 overlaps lines)
line-height: 3
line-height: 150%
word-spacing: word-spacing: 0.25in (not properly implemented yet)
text-align: text-align: center (values: left, right, justify)
text-decoration: text-decoration: underline (values: overline, blink)
text-decoration: line-through
text-decoration: none
text-indent: text-indent: 2.5em
text-indent: 25%
text-transform: text-transform: uppercase (values: capitilize)
text-transform: lowercase
vertical-align: vertical-align: super (not properly implemented yet)
vertical-align: sub


Please right-click over this page and choose "View source" to see how these CLASSES have been defined in the STYLE tag. Please note: to get the fonts displayed properly in Netscape v4, you must define the point size first; otherwise, it will just ignore your style-sheet. Also, you need to test the style-sheet in both Netscape and Internet Explorer - what works doesn't always work in another, despite the fact that the code is correct. The example below is the green over-lined text - to get this to be 14pt in Netscape v4.75 the size has to be declared first. However, if the size is declared first, the text is not over-lined in IE v5.5. Get round this by putting in JavaScript that dynamically writes another STYLE tag depending on what browser is being used.

I am dark red, arial 10pt, underlined and indented 10%.
I am dark green, arial 14pt, overlined, bold, and all LOWERCASE.
I am normal colour, italic and in small capitals.
I am normal text with letter spacing at 0.1em aligned to the center.
I am normal text with letter spacing at 0.5em aligned to the right.

Why can't I see all the formatting? Most likely your browser does not support the properties and values.