Cascading Style Sheets

By Joshua Erdman
Digital-foundation

Cascading style sheets are a great way to specify the font size, color, and type throughout your whole website from just one form. If you ever wanted to change the site's theme or style instead of spending hours updating all your font specifications on each page, you would just have to edit the stylesheet.css file.

What does a style sheet style?

The stylesheet.css file is pretty much a list of specifications for each type of HTML element. Typically you would list the font size, color, and type(s) for regular text in paragraph, H1, H2, H3, H4, and H5 tags. You can also specify the styles inside tables, bulleted lists, and your hyperlinks. Finally, if you want to use different paragraph styles you can specify classes to be more specific.

Inside a Typical Style Sheet

We will be referring to our sample stylesheet throughout this article.

Basic Font Formatting

The first 5 blocks demonstrate how to customize the style of each heading tag (H1-H5).

Font-Family - specifies the font, or fonts, that should be used.

Font-size - specifies how large to format the font for this particular style. The fonts can be specified in pixels and point format.

font-style - allows you to have the font underlined, italicized, etc.

font-weight - allows you to bold

color - specify the font color by using the standard 6 digital hexadecimal format. Valid entries are #000000 (black) to #FFFFFF (white).

Assigning multiple objects with the same format

Multiple objects can be assigned the same format. In the next element (after H5) you can see that text in the body, text in a paragraph, and also list objects are all formatted with the same block.

Scroll Bar Formatting

Some browsers allow you to specify the scroll bar colors. You can see the scroll bar formatting in the paragraph style

Using Classes

Finally classes are a great way to declare a paragraph without using the paragraph style. Throughout the NetworkClue.com website we use it all the time. Every clue we display is a paragraph using the "clue" class.

Clue: To specify a class use the format in the example under the paragraph style. It looks like p.note. This will create a paragraph style of class note. To use this class use a paragraph tag with this format:

Additional objects can be formatted as well, such as div and pre tags. For a full listing of objects refer to the HTML Command Reference.

References:

Cascading Style Sheet Sample

The HTML Command Reference

Article last reviewed: 08/16/2003

del.icio.us

Created by: Digital Foundation, inc.

All content of the NetworkClue website is copyrighted. Articles, notes, outlines, and all other materials may not be stored on the Internet or sold or placed by themselves or with other material in any electronic or printed format in whole or part. However materials may be referenced by links to the site.