Cascading Style Sheets

This lecture notes is based on Prof Doreen De Leon's lectures.

Reading

Sebesta Chapter 3

What are Cascading Style Sheets?

Style sheets allow you to manage the overall appearance of an HTML document. They let the author control the presentation attributes for all of the tags in a document. This can be done for a single document or, through use of a master sheet, a collection of documents.

There are three ways to attach a style to a tag:

Any combination of the above may be used in a document. Styles from the various sources are applied to the document, combining and defining style properties that cascade from external style sheets through document-level styles through inline styles. (Thus the name cascading style sheets.)

A Brief Description of the Styles

Inline styles

Document-level styles

External style sheets

Style syntax

Style Classes

Generic classes

Pseudo-classes

Style Properties

Property values

Property inheritance

Font Properties

font-family property

font-size property

Specify one of the following:

font-style property

font-weight property

The font property

List Properties

List properties let you control the appearance and position of the marker associated with an item in an ordered or unordered list.

list-style-type property

list-style-image property

A Simple Example

Check out First Style Sheet Example

Text Properties

These control how the text is aligned and presented to the user.

text-decoration property

line-height property

text-align property

Like the deprecated align attribute, the values are left, right, center, or justify (default: left).

text-transform property

float property

An example of an image that is right-justified is obtained by doing
<img src="http://www.math.ucla.edu/~ddeleon/dogruns.gif" alt="(Picture of a dog running)" style="float: right"/>. (Picture of a dog
running) In this case, the text flows alongside the image. As we add more text, the text will flow under the image, and then continue as normal. A similar effect is given if we left-justify the image. In that case, the text flows on the right side of the image. Left-justification of the image is the default, and it is not necessary to use the float property.

vertical-align property

Controls the relative position of an element with respect to the line containing the element.

One can use this to align an image vertically with respect to the surrounding text. This produces a different effect. For example, <img src="http://www.math.ucla.edu/~ddeleon/lazycat.gif" alt="(Picture of a lazy cat)" style="vertical-align: middle"/> (Picture of a lazy cat) produces an image that is aligned vertically such that the text appears centered next to the image. Notice that in this case, only one line of text appears alongside the image. We can choose to have the text appear vertically aligned with the top or bottom of the image, as well.

text-indent property

Margin Properties

Color and Background Properties

background-color property

background-image property

background-position property

background-repeat property

The background property

the color property

Another Example

See A Second Style Sheet Example.

The <span> Tag

A Third Example

See Population Studies

The <div> tag

Overall

References

Chuck Musciano and Bill Kennedy, HTML: The Definitive Guide, third edition, O'Reilly, Sebastopol, CA, 1998

Robert W. Sebesta, Programming the World Wide Web, 2d edition, Addison-Wesley, Boston, MA, 2003