The Basics of CSS

CSS stands for Cascading Style Sheets. If you want to learn a lot about CSS try -- Joe Burns' tutorial at HTML Goodies

What are Cascading Style Sheets and how do they work?
A style sheet is a reference point that lists all the styles used on a webpage or across a website -- fonts, font sizes, colors, etc., also background colors, indentations, spacing, etc.

The style sheet can be embedded in a document or it can be an external style sheet -- a document with the file extension CSS. We use external style sheets on the Business School site. All pages link to the style sheets, which in turn have a list of all the font styles used on the site. Look at the code for one of the Current Cascading Style Sheets for the business school.

Pretty elaborate, huh? What does it mean?

Well, every line that starts with a "." identifies a style, called a class. So, ".main" equals the style known as class main, ".blue" = class blue, and so on. Likewise, every line that starts with a "#" identifies a different div style, called an "id".

On style sheets, the style attributes come between brackets:
.blue { font-weight: normal; font-size: 12px; color: #003399; font-family: verdana, arial, helvetica, sans-serif; line-height:14px;}

The stuff in the brackets defines the class main as Verdana, Arial, or Helvetica, 12 px, the blue color known as #003399, with a line-height of 14 pixels. Incidentally, three fonts are listed so that if someone's browser doesn't have the first font, it will default to the following ones.

Here's what blue looks like:

It looks like this. But how does this page "call" for the style blue?

There are two simple steps. First, some code on the top of this page (and all pages on the new site) links the page to the external style sheet that defines .blue, .main, and all the other classes of font styles used on the site. Here's what that code looks like:

This is in the header, and tells the browser to read the styles for this page from the file "gen.css."

The second step is something you (or whoever is building a page) does themselves. You specify a font class for a body of text by using code to "call" for that class.

For instance, here's how this page "calls" for blue right here.

Rather than write a long font tag with all the font and color info inside of it, we used a tag to say that all the text within this span will have one style, the class that is known as blue.

You can define classes within lots of tags -- , <div>, <td>, . See Joe Burn's CSS overview for the low-down if this is all Greek to you. Once you start using these tags you will never want to use font tags again, but in case you don't believe me:

Why use style sheets?
For one thing, your code will be a lot cleaner. You will not have to specify fonts over and over, which is one reason the WWW consortium and many popular sites recommend CSS.

What if you want to add your own funky font styles to your site?
Sorry, you are SOL, as they say in the Army. We want standardized fonts, not a profusion of looks. However, two things:

There are many choices on the style sheets right now, so you have some options there. See all the current styles on a page.

If you need a different size font or a special font for a header, we will consider adding it to the style sheet. Contact Communication Services if you have a style that you think should be added. Otherwise, you should only use the standard styles on the style sheets, and instead of using font tags, call for the styles with class commands inside , , <div>, <td>, or other tags.

Can you do all this an easy way in FrontPage?
Yes, you can define classes for the fonts that are available on the style sheets. For easy-reference there is a list of the CSS styles used on our site. To define these font styles, you can change them in either in the code/HTML view or in the WSIWYG/Normal view:

In the Normal view: You can click on any part of a paragraph and then choose a style to be applied to it. In FrontPage, the styles can be selected in the top bar, in the box that is to the left of the fonts. It usually says "Normal" unless there is a specific style defined for the text that you clicked on.

If you want to change the style for the text in a cell or a series of cells in a table, select the cells you want to apply the style to, right-click on them, choose Cell Properties > Style. In the style box, you can define any style class that is listed in the list of CSS styles.

In the HTML: You can put span tags around the distinct text that you want to have a specific style. You can do this by surrounding a chunk of text with
 on one end and on the other.

You can define a style for a single paragraph. ()

If you want to have a style apply to the text in a table cell, you can set a class for the <td> tags so that anything in those cells will have that style.

Where can I see what styles are available?

There is a complete list of CSS styles available. Any of these can be chosen directly through FrontPage as outlined above.

Why does the text I'm pasting in look different than the text on the rest of the site?

This question, and the way to solve this problem, are detailed in the instructions on a simple way to strip coding from text.

Next, on to Active Server Pages ->

Back to top
E-mail this page
Print this page

Also see

Before You Start

Guide to Building a Web Site (PDF)

Getting Started

Basic Coding

Basics of CSS

Active Server Pages

Using the Template

Style Guidelines