body

CSS: introduction | tutorials | tips | links

< Home

< Frontpage

< Graphics

< Webtech

< Accessibility

< Web Development Resources

< Meta Data

Tutorials:

CSS can control all tags in the html tag library. Some of the more useful purposes include:

	Eliminating the need of the <font> tag in html.
	Removing the underline attribute of links.
	Setting the header tags to the font and size you want.
	Creating picture bullets.
	Hiding blocks of text.

You can style a page in many different ways: inline style sheets and external style sheets. An inline style sheet can only control layout for one page, whereas an external style sheet can control any number of pages.

After reading this tutorial, check out our tutorial on using CSS with FrontPage.

Adding A Style

See how styles are added using the following system. This syntax applies to inline or external CSS.

As a general rule, you must include the semicolon to terminate a property.

[selector] {[property]:[value]; [property]:[value];}

Inline style sheets:

An inline style sheet is one that includes the styles in the head tag of the document.

Use this syntax when inserting the required style structure.

External style sheets

Adding an external stylesheet consists of exactly one line.

Fill in the [path] section with the relative

(../../<dirname>/<filename.css>)

or absolute path

http://www.oznet.ksu.edu/

<dirname>/<filename.css>)

of your CSS file. You will know it is a CSS file by the extension css

Adding a style sheet to an existing site

After establishing a CSS file, you will have to change a certain amount of formatting tags in your web site, including:

	If you previously formatted you code using <font> and <color> tags, you need to remove these tags and call a class instead.
	If you are using an external CSS file, you will have to include the link tag to import the CSS file. Inline CSS users will have to include the style tag.

These changes can involve a significant amount of work (this site was done, then redone with CSS - a daunting task). In the future, though, if we desire to change the look and feel of the site, it will be possible without much effort, by simply rewriting the style sheet.

If you know you will want to use CSS, make a style sheet before you start on the actual site. Make a test page, similar to this one, and assign each element a style, so that it can be easily viewed. You'll need to right-click on the link, choose Save Target As, and save it to your hard drive to view it in Notepad, due to the way browsers interpret CSS files.

The actual CSS for this site is shown below:

Each element preceded by a period is a selector, the body tag sets the body color, and the a:xxxx tags near the bottom control how links look. In this case, the links are only underlined when the mouse hovers over them (note: this doesn't work in Netscape 4).