So You Want A Style Sheet, Huh?

By Joe Burns

http://www.htmlgoodies.com/tutorials/browser_specific/article.php/3478711/So-You-Want-A-Style-Sheet-Huh.htm (Back to article)

     First things first: This tutorial is an updated version of my original style sheet tutorial. Style Sheets, A.K.A.: Cascading Style Sheets, A.K.A.: CSS, are becoming more popular now that they are cross-browser models thanks to Netscape's version 4.x including the commands. This is a general overview of Style Sheets. You'll find more specific Style Sheet elements explained in the Positioning, Class & ID, and DHTML tutorials.

...use these to jump around or read it all.

[Style Sheets? Cascading Style Sheets, or CSS?] [Implementing the Style Sheet]
[One Style Sheet--One Page]
[Make With The Style Sheet Already!]
[What Tags Can I Define?] [The Definitions]
[What It All Looks Like]
[What If I Want the Same Tag 2 Different Ways?]
[One Style Sheet--Many Pages]
[Can I Use These on Individual Elements?] [Now Try These]  

     Wouldn't it be nice if you could say to all browsers that enter your page - "This is how I want you to handle my text." You could make all H3 commands arial font. You could make all paragraph commands indent a half inch. You could specify a distance between your lines! You could ask for the world on a string! You wouldn't get it, but you could ask. It's the other stuff I'm talking about.

     Explorer 3 and above and Netscape 4.0 (and all those to come) offer you more control through the use of what are titled "Style Sheets". It's actually a novel concept. Instead of writing font size, weight, margin commands, etc, etc, again and again...you write them once and the whole page feeds off of that one master list, that one style sheet.

Style Sheets? Cascading Style Sheets, or CSS?

     Any one. They all mean the same thing. I'll tell you what I really find funny. I had the original style sheets (usually called Explorer Style Sheets when referenced on other pages) up for six months when Netscape 4.0 came out. All of a sudden I was over run with letters asking me when I was going to put up a tutorial on Cascading Style Sheets and/or CSS even though they mean the same thing. Yet this pup had been sitting waiting all the time. I just hadn't updated the name to the new version.

     The term "Cascading" Style Sheets is used because more than one Style Sheet can affect the same page. For instance, if you are using a Style Sheet on the actual document, called an "in-line", and a style sheet that is being referenced by multiple pages, called a "span", both can have an effect on the items in the page. If both the in-line and the span Style Sheet are attempting to affect the same item, like an <H1> command, the closest to the <H1>command wins. That would be the in-line in this case.

     In case you're wondering, if two span Style Sheets are attempting to affect the same <H1> command, the one listed second in the actual HTML document wins. It's closest to the command going from the top of the document.

Implementing the Style Sheet

OK, you can do this one of two ways:

One Style Sheet -- One Page

     This is the way I see style sheets being used most often. To see a couple in action, head to USA Today or ESPN. Both use style sheets on their pages. I'm using that type of style sheet on this page. Check the source if you don't believe me. Go ahead - I dare ya!

     In all fairness, I should mention that when used like this, it technically isn't a style sheet, it's an in-line style block. But another term just pushes something useful out of your brain. ...and we can't have that.

Follow these rules to place a Style Sheet (Block) on your page:

     When you're all done, the format will look like this:

<HEAD>
<STYLE TYPE="text/css">
<!--

Style Sheet information goes in here...

-->
</STYLE>
</HEAD>

Hey! Make With The Style Sheet Already, Bub!

     This gets a little confusing, but there is a method to the madness. I'll give you the format to follow and you plug in what you want to work with.

Here's the basic format:

TAG {definition; definition; definition}

Here's what a line from this page's style sheet looks like:

H2 {font-size: 16pt; font-style: italic; font-family: arial}

OK - Lookie Here! There are a few things I want to point out:

For a full list of Style Sheet Commands, visit either of thise great sites:

What It All Looks Like

     Here's the Style Sheet from this page:

<STYLE TYPE-"type/css">

<!--
BODY {background: #FFFFFF}
A:link {color: #80FF00}
A:visited {color: #FF00FF}
H1 {font-size: 24pt; font-family: arial}
H2 {font-size: 18pt; font-family: braggadocio}
H3 {font size:14pt; font-family: desdemona}
-->

</STYLE>

What If I Want The Same Tag Handled Different Ways?

     What you do it assign different "classes" of tags. Real simple. Look here:

H3.first {font-size: 20pt; color: #FF00FF}
H3.scnd {font size: 18pt; color #DD00FF}

     See what I did? I labeled the H commands separately by adding a dot and then a suffix. I used "first" for the first type and "scnd" for the second type. You can use what ever you want. I like these determinants. When you place them on your page, you do this in the text:

<H3 CLASS="first">This will be affected as outlined in "H3.first"</H3>
<H3 CLASS="scnd">This will be affected as outlined in "H3.scnd"</H3>

     I get a little more in-depth in the Classes and ID's Tutorial

One Style Sheet--Many Pages

     First off, create a style sheet as you did above. This will be the only thing on the page. No <HEAD> commands this time. You will make the file so that if I wanted, I could just copy and paste what you have right into my own <HEAD> commands. Which is just about what you will be asking the computer to do.
     The Style Sheet will be a simple text file with a .css suffix. Let's say you name your style sheet "fred". Its name would become "fred.css". The suffix is required for browsers to recognize it as a style sheet rather than a simple mesh of letters.

Place this command on your page to call for the Style Sheet:

<LINK REL=stylesheet HREF="http://www.your.page/fred.css" TYPE="text/css">

Here's what's happening:

     Every page that contains this command will be affected by the one style sheet you created and placed in your directory. One sheet - many pages.

Can I Use These Style Element on Individual Items?

     Yes you can. They simply sit inside the TAG you are working with. Just make sure to denote them using the STYLE command. Since they sit inside another command as just a defining command, they require no /STYLE. In that position, they affect only what you say they will rather than the entire page. Like so:

<FONT STYLE="font-weight: extra light; font-family: courier">affected text<FONT>

     Follow this format and you can define a style for just about any HTML TAG. There's also a method of setting up classes of items that works pretty much the same way. See just below for the link.

Now Try These

     Now that you have the basics in hand, try these more specific CSS tutorials: Positioning, Class & ID, and DHTML
[Style Sheets? Cascading Style Sheets, or CSS?] [Implementing the Style Sheet]
[One Style Sheet--One Page]
[Make With The Style Sheet Already!]
[What Tags Can I Define?] [The Definitions]
[What It All Looks Like]
[What If I Want the Same Tag 2 Different Ways?]
[One Style Sheet--Many Pages]
[Can I Use These on Individual Elements?] [Now Try These]