Use these to jump around or read it all…
[Style Sheet Commands]
[Setting Up the Style Section]
[Setting Up the Classes]
[Putting the Classes to Work]
[Can I Have More Than One Class?]
[What About Those IDs?]
This is a great couple of ways to quickly use Cascading Style Sheet (CSS) commands. When I speak to people about CSS, the main thing I hear is the time the sheets save them. They’ve set up a series of formats for certain commands and without any extra work, the sheet takes care of the styles.
The reason I like these two commands so much is that they’re quick, even for those
who do not regularly use Style Sheets. They’re easy to understand, and they save on the fingers by cutting down on the typing.
It should be said that Style Sheets are not universal as of the writing of this tutorial (1/8/97). Your viewer will need to be using Netscape 4.x or
Explorer –any version, 3 or 4– and even then the commands are very buggy. Now, you do not need to be overly concerned that a browser that doesn’t read Style Sheets will be baffled by this. Earlier browsers are great at ignoring commands they do not understand. The text just appears as normal. You could also make a point of using a JavaScript meant to “see” the user’s browser and send them to a page that is suited to their system. I have one here. So use these, but don’t rely heavily on them.
Style Sheet Commands
First off, you need to have a general understanding of Style Sheet commands. Don’t be put off at this point. They are very easy to grasp. At the end of this tutorial, you’ll have no trouble implementing them onto your page.
The easiest way to get started is to grab a list of all the commands. There are a few nice ones out there. I have a pretty good one in my Cascading Style Sheet tutorial. You’ll also find a very full list at C-Net, and there’s always the World Wide Web Consortium’s Style Site.
This is a Style Sheet model, so you will need to do two things to get started: set up the Style section within the HEAD commands, then set up the classes.
Setting Up the Style Section
This will go between the <HEAD> commands of your HTML document. You can simply copy it from here:
|
<STYLE type=”text/css”> <!– Classes and IDs will go in here… –> </STYLE> |
Setting Up the Classes
Now the fun part. Let’s set up a class. For the sake of argument, let’s say I want to set up a class of text that will be Arial font, 20pt size, bold, and orange. You could do it this way:
<B>text in here</B></FONT>
That’s a good bit of text, plus I’d have to type it every time I wanted that class of text to come up. If I’m doing a Netscape table where I want every
cell to have that type of text, I’d have to write it every time for every cell. Yeah, I could copy and paste it again and again, but I’d much rather just write it out once, assign
a class to it, and refer to that class when I want it.
Here’s the class structure that equals the text above:
The class is identified through a period and then a codename. I chose “pumpkin” for this example, mainly because I am setting the text to orange.
What follows are the Style Sheet commands, separated by semicolons, encased within those fancy brackets. See that in the class statement above? Place that class statement inside the <STYLE> commands from above. It should look like this between your <HEAD> commands:
|
<STYLE type=”text/css”> <!– .pumpkin { font-family: arial; font-size: 20; font-style: bold; color: orange } –> </STYLE> |
Putting the Classes to Work
Okay, we’re ready to go. The class is in place and we can call on it anytime we want within the same document. Obviously, if you follow the steps
to use an external Style Sheet, you can use this across pages, but this tutorial is set up to work within the same page.
You can call for this as part of any command that is used to alter text. Here are a few examples:
|
<I class=”pumpkin”>This is the text result</I> <U class=”pumpkin”>This is the text result</U> <TD class=”pumpkin”>This is the text result <P ALIGN=”right” class=”pumpkin”>This is the text result</P> This is the text result |
Can I Have More Than One Class?
Sure. You can have as many as you’d like as long as you keep using different codewords to denote the many classes. Just keep lining them up one after the other.
What About Those IDs?
The ID command works exactly the same way as the CLASS command. The reason it exists is to allow you to incorporate these Style Sheet models into JavaScript or DHTML. So, unless you are attempting to use these with JavaScript, stick with the CLASS command. You can use the ID command, but it won’t do anything different or better than the CLASS command. In case you want to give it a whirl, here’s how to use it.
In the Style section of your <HEAD> command, denote the ID by a hash mark (#) and a codeword, like so:
From that point on, it’s the same format as the CLASS commands, like so:
<P ID=”pumpkin”>This is the text result</P>
Here’s what you get:
This is the text result
The ID and the CLASS formats can be used on the same page. I’m using both on this page, with the same codeword.
I think these are great. You could put together your entire Style Sheet system using only these class models. Here’s to good pages!
Enjoy!
[Style Sheet Commands]
[Setting Up the Style Section]
[Setting Up the Classes]
[Putting the Classes to Work]
[Can I Have More Than One Class?]
[What About Those IDs?]
