cascading style sheets (css) overview

What is CSS?

CSS allows you to use a single file to control your site's global text look and feel. It offers typographical ability far beyond HTML. In a way, it lets you create your own tags. Together with frames, you can make websites and online documentation.

When to Use CSS?

Use CSS if you have a website with multiple pages. CSS is perfect for a corporate website.
Don't use CSS if you have only one or two pages.

Advantages

A single global style sheet.
Make one change and all dependant pages will automatically use that change.
Much more control over text look and feel than in HTML.
Create your own tags.

Disadvantages

Not implemented consistenly on older browsers. CSS is not supported in Netscape 3.x or less.
However, CSS "degrades gracefully." This means that 4.x users will see the advantage of CSS, and 2.x users will see ordinary HTML.
Test your pages with BOTH browsers.

An Overview

CSS is easy to use. There are several ways to implement CSS.

You could put the CSS styles in the header of each page. That allows manipulation of that particular page.

The best strategy is to create a single CSS page with the global styles for the site and then add a link from each page to that global page. Thus the global page controls all of the other pages.

The global page is a simple text file with the name style.css and it's saved in the same directory as your site.

Here's a very simple CSS file:

=== Start Clip ===

P {	color: red } 

=== End Clip ===

It sets paragraph text to display in red. Copy that line, paste it into a text file, and save it as style.css

At the top of each HTML page, add a link into the header. Your page looks like this:

=== Start Clip ===
<HTML>
<HEAD>
<LINK REL=stylesheet HREF="style.css" TYPE="text/css">
</HEAD>

<BODY>
<P> Whoa! Color!
</BODY>
</HTML>
=== End Clip ===

You'll notice that the header has an href to the style.css file. You can name the file whatever you like, as long as the extension is .css

Copy that HTML, save it as test.html, and open it in your browser. Voila!

That's it?

That's it. All you need is a global text file that has a list of the specifications for each html tag and then put a link in your page's header to that global text file.

More Tips

Use CSS with frames. If the user can see CSS, then they have browser 4.x and they can see frames too. If you keep your frames simple, then you can make site that displays documentation and manuals rather well.

Don't Go! Tell Me More!

The neat thing about CSS is that you can make versions of tags. For example, creates a paragraph. You can invent your own qualifiers to , such as (yes, give it any name you like) and then in the style sheet, name the style as p.catfood, create a combination of effects for that style, and save. Whenever you want to apply your new style, just start a paragraph with and see what you did.

I Wanna See an Effect!

Oh, okay. If you're using IE 4x, then you can mark text with a highlighter. If you're using Netscape, you don't see anything special about this paragraph.

Here's the code that made this highlight happen.

your text here