home / articles / frontpage

Cascading Style Sheets in FrontPage 98

The following illustration is a screen capture from a page on my website which demonstrates using FrontPage 98's Cascading Style Sheets support (http://www.connectrans.com/takempis/CSS.htm). It is a shot of 4 hyperlinks at the bottom of the page:

You'll notice that these hyperlinks all look different. Yet they are on the same page. How is this done? With Cascading Style Sheets (CSS), of course! I couldn't duplicate them in this article because of the way it is published to this online magazine, but if you visit the site you can try it out for yourself.

Today, I'm going to tell you how to use FrontPage 98 to create CSS for yourself. The first thing you'll want to do is to create an Embedded Style Sheet for your page. This is done by selecting Format|Stylesheet from the menu. FrontPage 98 has a nice utility for implementing CSS on your Pages. When you select this menu item, you will see the following dialog box:

Note the editing window. This is the actual Style Sheet tag. The style definitions go in between the "<--" and "-->" comment tags. You can either edit it by hand, or use the "Style" button to create your styles. To do this, you're going to have to know a little bit about CSS first. CSS is a fairly large topic in all, and you may want to investigate the entire subject for yourself, as you will want to learn the syntax and rules for applying this in a lot of different instances. For the entire CSS specification, check out http://www.htmlhelp.com/reference/css/.

For the purpose of this article, I'm going to give you some basics. A Style Sheet is a collection of Rules. A Rule is a combination of a Selector and one or more  Declarations. A Declaration has 2 parts: Property and Value. Here's an example, from my demo page, of a simple Rule:

h1 { font-weight: bold; font-family: Elephant; font-size: 16pt; color: rgb(0,0,128) }

"h1" is the Selector. It "selects" the element which the Rule applies to, in this case Header 1. The Declarations for this Selector are enclosed in curly brackets. For example, "font-weight: bold" is a Property/Value Declaration which states the in Header 1, the rule for the text is that it should be bold. Note that the Declarations are separated by semicolons.

Now I'm going to take it a step further and talk about Classes. Classes are used to define multiple rules for elements on the page. In the example of the hyperlinks, I used 3 different Classes, which I named "first," "second," and "third." To define a Class for a Selector, you add a period after the Selector, followed by the Class name. Here are the 3 classes I created for the hyperlinks on this page:

a.first {font-family: Comic Sans MS; font-size: 12pt; color: rgb(0,0,255); font-weight: bold; text-decoration: none }
a.second { font-family: Arial; color: rgb(255,255,255); font-weight: bold; text-decoration: none; background-color: rgb(0,0,255) }
a.third { font-family: Brush Script MT; background-color: rgb(255,255,0); color: rgb(128,0,128); font-weight: bold; text-decoration: blink }

The "a" is the Selector code for a hyperlink (from "anchor"). Note the Class names after each "a."

Now, before you go into deep despair regarding all of this coding, hold on a minute! All you're really going to have to know (unless you want to get really fancy) is the Selectors for each of these elements, and the Selectors are just the HTML code which designates the element. For example, a hyperlink always starts with the code "<a href=...". Note the "a" at the beginning. So, how do you write the Declarations? Just type the Selector inside the comment tags in the editor dialog, followed by a space. The click the "Style" button on the dialog box. You will see the following dialog box appear:

All you have to do is use these tabs to define the properties you want for your element/class, and FrontPage will write the code for you!

Now that you have your Style Sheet, you're ready to begin using it on your page. This also is relatively easy to do with FrontPage 98. For example, if you want to apply a Style to a hyperlink, create the hyperlink, or right-click on an existing link and select "hyperlink properties" from the popup menu. Then click the "Style" button in the resulting dialog box. You will be shown a list of available classes which you have created for that element, to choose from. Select the Style you want, click "OK,"  and voila! You have an element "with style."

Now, that didn't hurt too much, did it? Make a couple of final notes, and we're done for today:

1. Many of the properties which FrontPage 98 offers for customization are not recognized by some browsers. Of course, this is okay, because they will simply miss out on the richness of your page, but not the functionality.

2. When customizing hyperlinks, keep in mind that some people may not recognize your hyperlinks if you get fancy with your style. For example, they may be expecting an underlined hyperlink, and if you remove the underlining, well, you know how it is.

Okay, breaks over. Back on the bus!

Author: Kevin Spencer
Date: 12/12/97

More articles about Microsoft FrontPage
More articles by Kevin Spencer
Author Biography