Cascading Style Sheets

Cascading Style Sheets - Multiple

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
      Frames
      Style Sheets
         Type and possibilities
         Background
         Text, Dimension
         Font
         Border
         Padding, list
         Classification
         Positioning
         Hyperlinks
         Misc.
         Multiple CSS
         You try it
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

Combining style scheets is really very easy. All you have to do is put the codes together on the same page. Let me show you...

Let's say you wanted a page where all of the paragraphs have a large first letter in pink, font that is green, and a background of yellow. Additionally, you'd like your links to have a line through them and for the link to turn purple when you move your mouse over it and the background to be a pale blue, but for it to be undetectable from the main text when the mouse is off of it. Whew... tricky? No. Here it is. We'll take it one step at a time: First, we always start a style sheet with the following:

And we always end it with

</STYLE>

In between we add the codes:

p.wonder {background-color: yellow;color: #006600}
p.wonder:first-letter {color: pink;font-size:xx-large}
a.cool:link {color: #006600; text-decoration: none}
a.cool:visited {color: #006600; text-decoration: none}
a.cool:hover {color: #660066; text-decoration: line-through; background: #ccccff}
a.cool:active {color: #660066; text-decoration: line-through; background: #ccccff}

So all together we have:

<STYLE TYPE="text/css">
p.wonder {background-color: yellow;color: #006600}
p.wonder:first-letter {color: pink;font-size:xx-large}
a.cool:link {color: #006600; text-decoration: none}
a.cool:visited {color: #006600; text-decoration: none}
a.cool:hover {color: #660066; text-decoration: line-through; background: #ccccff}
a.cool:active {color: #660066; text-decoration: line-through; background: #ccccff}
</style>

All of that goes in the heading. By now you should be able to tell what each part of the code does. Don't worry if you can't remember it all because that's what tutorials are for. Now, in the body of your document you could put:

<p class="wonder">Oy ve, what have I done to myself? I went ahead and put a <a href="#" class="cool">link</a> in the middle of this paragraph. Nifty, or no?</p>

And you see:

Oy ve, what have I done to myself? I went ahead and put a link in the middle of this paragraph. Nifty, or no?

You can use many, many style sheets on the same page. Make sure you give them different class names so you can specify which you'd like to use. Have fun playing with these.

This page relied heavily on W3schools.com