GDT 150 Design for the Internet
Handout: CSS Examples
All text on this page is enclosed in P tags. The style attributes are as follows:
font-family: verdana;
font-size: 10pt;
width: 50em;
border: 1px dashed #999999;
background-color: #FFFFCC;
This text has font-weight: bold; applied to it. This will work in all CSS browsers.
This text has font-style: italic; applied to it. This will work in all CSS browsers.
This text has text-decoration: underline; applied to it. This will work in all CSS browsers.
This text has text-decoration: line-through; applied to it. This seems to work in all CSS browsers.
This text has text-decoration: overline applied to it. This won't work in NS4.x.
This text has font-variant: small-caps; applied to it. Doesn't work in NS4.x, buggy in IE5.5 for the PC.
This text has word-spacing: 4em; applied to it. Not in NS4.
This text has letter-spacing: 15px; applied to it. Not in NS4.
This text has text-transform: uppercase; applied to it. Seems to work in all CSS browsers.
This text has text-transform: lowercase; applied to it. Seems to work in all CSS browsers.
This text has text-transform: capitalize; applied to it. Seems to work in all CSS browsers.
This text has cursor: crosshair; applied to it. Your cursor should change to a crosshair when hovering. It seems to work in all 4.0+ browsers, except NS4.x on the Mac (of course).
This text has cursor: help; applied to it.
This is a link with text-decoration: none; and color: #663366; applied to it. The hover pseudo-class is defined as text-decoration: underline; color: #993300;
This text has text-indent: 10em; applied to it. This should work in all CSS browsers. It indents the first line only, so it's great for indenting paragraphs.
This text has line-height: 250%; applied to it. This text has line-height: 250%; applied to it. This text has line-height: 250%; applied to it. This text has line-height: 250%; applied to it. This text has line-height: 250%; applied to it. Line-height works in all CSS browsers, although the vertical alignment of the text in the line-height changes.
This text has line-height: 5px; applied to it. This text has line-height: 5px; applied to it. This text has line-height: 5px; applied to it. This text has line-height: 5px; applied to it. This text has line-height: 5px; applied to it. This text has line-height: 5px; applied to it.
This text is aligned right by using text-align: right; This text is aligned right by using text-align: right; This text is aligned right by using text-align: right; This text is aligned right by using text-align: right; NS4.x doesn't do this right. It aligns to the window, not to the space allocated.
This text is aligned center using text-align: center;
This text is justified using text-align: justify; The exact way it justifies changes based on the browser, but it seems to work pretty well in all CSS browsers. This text is justified using text-align: justify; The exact way it justifies changes based on the browser, but it seems to work pretty well in all CSS browsers.
The first letter of this text should be 20pt, background-color: #999999. It uses the first-letter pseudo class. This is fairly buggy when combined with certain box properties, such as padding and margins.
The first line of this text should be bold and brown. It uses the first-line pseudo class. It is not well supported by most CSS browsers, not at all in Netscape 4.x in either PC or Mac.
