Computer Services brings together skills, knowledge, hardware & software, and commitment to provide a customer centered support service.
	Remote File Access (RFA)	MS Campus Agreement	Wireless Local Area Network

[Content]

Cascading Style Sheets at UWT

Intended audience: People who have a solid understanding of Cascading Style Sheets. If you've ever written your own style sheet, and need a quick refresher, this page is for you. If you've read the other tutorials and would like to use style sheets at UWT, this page is for you. This page was not intended to be a tutorial on style sheets. If you do not have a solid understanding of CSS, this page might pose more questions than it answers. Please review the following links before proceding.

webmonkey.com's Guide to CSS

Author: James "I love acronyms because I can't spell" Woods
Started: 11/30/98 11:00 AM
Finished: Ongoing

Ok, here are some simple tips and how-tos for web publishing at UWT using Cascading Style Sheets.

Use the KISS method
But how do I use CSS??
But I want to use CSS properties that are not in your Style Sheet!
- Backgrounds with CSS

Use the KISS method

Step 1) Go to the Halloween store and get the Gene Simmons make-up kit by Blam-O ©.
Step 2) Ignore step 1.

Ok, seriously, KISS stands for Keep It Super Simple. Cascading Style Sheets are only as complicated as you make 'em. For the most part I use them to replicate the standard html "mark-up". As you've no doubt heard, HTML was originally meant to keep structure and content separate. Why, you might ask? I believe it's because not all content authors are web designers and not all web designers are content authors.

Take me for example; I ain't no english major or grate spelr 8^), but I do know how to build web pages. After visiting this page, would you rather have me pick colors/fonts for your course description or build the page for your course description? Probably neither, but that's beside the point.

The point is that Cascading Style Sheets allow you to write your web documents and have a simple way for them conform to our Style Sheet. Again, simple is the main thing.

Use simple names for classes
- No "_" or "-" or numbers or anything fancy
- Follow a naming convention. Which convention you choose doesn't matter, but it has to be one that you'll stick to. Examples:
  - lowercase .bigred
  - UPPERCASE .BIGRED
  - Mix Case .bigRed
  - etc...
Don't come up with a linked style sheet for each page; that defeats the purpose.
Don't use fonts and colors and cool animated .gifs just 'cause you can. Ask Brian Anderson about this.
Always check your pages in a varity of browsers (Netscape 4 and IE 4 and up for PC and Mac, and Lynx at least.

But how do I use CSS??

So, where's the beef? Here's the beef. I've set up our Style Sheet to be easily used with the 3 main selectors:

Selector	Purpose/Effect
<p class="foo"> and </p>	Leaves horizontal space above and below the selected area
<span class="foo"> and </SPAN>	Goes with the flow. Does not interrupt or block off the selected area
<div class="foo"> and </div>	Blocks off a whole division or section of a page into a selected area.

The selected area is considered anything between the beginning and ending selector. Span and P are used extensively throughought the document, while div is not used as much (Unless you're into DHTML, which is wwwaaayyy beyond the scope of this document.).

Below are the elements with the "style" attribute.

<p> This example is P </p>

<H1> This example is H1 </H1>

<H2> This example is H2 </H2>

<ADDRESS> This example is ADDRESS </ADDRESS>

This example is BLOCKQUOTE This example is BLOCKQUOTE This example is BLOCKQUOTE This example is BLOCKQUOTE This example is BLOCKQUOTE This example is BLOCKQUOTE This example is BLOCKQUOTE This example is BLOCKQUOTE This example is BLOCKQUOTE This example is BLOCKQUOTEThis example is BLOCKQUOTE This example is BLOCKQUOTE This example is BLOCKQUOTE This example is BLOCKQUOTE This example is BLOCKQUOTE

<p style="color:red;"> This example is RED </p>

<p style="font-size: small;"> This example is </p>

<p style="font-size: large;"> This example is LARGE </p>

<p style="text-align:center;"> This example is CENTER </p>

<p style="font-weight:bold;"> This example is BOLD </p>

< style="text-decoration:underline;">This example is UNDERLINE <>/UNDERLINE