E-mail this pageBuilding and Linking Style Sheets
If you've read the section of this site on Cascading Style Sheet Theory, you've got some idea of what a style sheet can do for you, but you've probably also discovered that the syntax for Cascading Style Sheets is quite unlike HTML. Fortunately, FrontPage 2000 takes most of the sting out of creating a style sheet: it can help you both with the building and the linking of a style sheet.
To begin, ensure that you're working in Page view, and then select File|New|Page... from the menu. This will bring up the New dialog.
If you select the third tab at the top of this dialog, the Style Sheets options menu will appear. You'll notice that there are a number of pre-defined stylesheets there to choose from, and you're more than welcome to use any of those either in total or as starting points for building your own style sheet.
In the following instructions, you'll be working from the starting point offered by the Normal Style Sheet-- and this starting point is really nothing more than a blank page. To begin, select Normal Stylesheet , and click OK: a new blank page will appear in the editing window. Floating above the page (or docked to your toolbar) will be the Style toolbar. It's a pretty minimalistic toolbar, containing only one button, and that button is labeled, not surprisingly, Style :
When you click on the button, the following Style dialog will appear:
If you're working with a brand new style sheet, the dropdown box under the word List will read All HTML tags , and the Styles window will list all possible HTML elements for which you can define a style. (If you're editing or modifying an existing style sheet, the default in the List field will be User Defined Styles , and the Styles window will list the styles you've already defined. To get to the list of all HTML elements, change the setting in the List field.)
When you select one of the HTML elements from the list and then click on the Modify... button, you'll see the Modify Style dialog. At the top of the dialog, you'll see the name of the current element or style; in the middle you'll see a rough preview of how that style currently effects the page, and at the bottom of the dialog you'll find a Format button which allows you to select which attributes of the style you'd like to modify.
The Font options allow you to set the color, size, weight, and typeface of a font; the Paragraph options offer options to adjust left and right margins and spacing; the Border options provide an opportunity to set a border (avoid) and to set background/foreground colors; the Numbering options govern numbering and bullet styles; and the Position options give you control over the DHTML position of items. Generally, you'll be making most of your selections from the first two: Font and Paragraph .
Ideally, you should define a style for every HTML element you expect to use (or know that you're using). Minimally, this is likely to include the following HTML elements: body , p , th , td, ul , li , ol , block , blockquote , a , and h1-h6 . Usually, you'll probably want to set up one or two custom styles as well--there'll be more on that later. The table below itemizes the styles which you should think of setting, lets you know which HTML element governs that particular style, indicates the specific format menu and item to select, and offers the name of the CSS attribute that will be set.
| To Set | Adjust HTML Element | Use Menu | CSS Definition |
|---|---|---|---|
| page background color | body | Border|Shading|Fill...Background color | background-color |
| default text color | body | Border|Shading Tab| Fill...Foreground color | color |
| left page margin | body | Paragraph|Indentation...Before text | margin-left |
| right page margin | body | Paragraph|Indentation...After text | margin-right |
| default page alignment | body | Paragraph|Alignment | text-align |
| font for paragraphs | p | Font... | font-family, font-size, color |
| space above each paragraph | p | Paragraph|Spacing...Before | margin-top |
| space below each paragraph | p | Paragraph|Spacing...After | margin-bottom |
| table header alignment | th | Paragraph|Alignment | text-align |
| table header font | th | Font... | font-family, font-size, color |
| table cell alignment | td | Paragraph|Alignment | text-align |
| table cell font | td | Font... | font-family, font-size, color |
| numbered list margins | ol | Paragraph|Indentation...Before text and After text | margin-right, margin-left |
| bulleted list margins | ul | Paragraph|Indentation...Before text and After text | margin-right, margin-left |
| list font | li | Font... | font-family, font-size, color |
| block indentation | block, blockquote | Paragraph|Indentation...Before text and After text | margin-right, margin-left |
| heading fonts | h1, h2, h3, h4, h5, h6 | Font... | font-family, font-size, color |
| hyperlink | a | This should be done manually in the stylesheet. See note below. | font-family, font-size, color, text-decoration |
Except for the creation of styles for hyperlinks, FrontPage's style tool can be used to create style definitions for each of the HTML elements listed above. For the hyperlink (which can have four separate states--link, active, visited, and hover), you'll want to write your style definition by hand. It should look something like this:
a:link {font-family: Arial, Helvetica, Helv, sans-serif; font-size: 100%; color: blue; text-decoration: none;)
a:active {font-family: Arial, Helvetica, Helv, sans-serif; font-size: 100%; color: red; text-decoration: none;)
a:visited {font-family: Arial, Helvetica, Helv, sans-serif; font-size: 100%; color: purple; text-decoration: none;)
a:hover {font-family: Arial, Helvetica, Helv, sans-serif; font-size: 100%; color: blue; background-color: yellow; text-decoration: none;)
In the definition as written here, no hyperlinks would be underlined (as a result of text-decoration: none ), an unvisited link would be blue, a visited one would be purple, an active link on a page would be red, and the hyperlink's background would be highlighted whenever a mouse passes over it (as a result of the background-color setting in the a:hover definition).
Creating a custom style
As demonstrated in the CSS Theory page on this site, it's possible to build style definitions beyond just those that define HTML elements. You can use FrontPage's Style tool to create a style, for example, that will provide a hanging indent for bibliographic references. To do so, you'd load your style sheet, click the Style button, and then, instead of Modifying an existing HTML element's default style, you'd select the New button from the Style dialog.
Once you click the New button, you'll have a chance to give your style a name in the Name field. Call it Citation .
Finally, you need only set the particulars required to create that hanging indent style: you'll want to set up a left-margin of, say, 5% and a text-indent of -5% --this will create a first line that's flush with the regular page margin, and have all other lines in any given citation wrap to a 5% indentation. Make these settings by clicking on the Format button, selecting Paragraph , and then setting the Alignment field to Left , the Indentation...Before Text field to 5%, and the Indent first line field to -5%. Once you've done so, you should find that the preview reflects a hanging indent.
If you've got more styles to set up, you can set them up now. Otherwise, it's time to think about saving the style sheet.
Saving your style sheet
Since you can use the same style sheet for multiple pages (in fact, across all pages on a given web site if you wanted to), you'd be best off saving the style sheet to a location that isn't specific to a particular course. It may be a good idea to set up a folder off your root folder and name it Styles-- subsequently, you could use that folder as a repository for any style sheets you might create.
Your style sheet has to have a file extension of .CSS --anything else won't work, and you should take care to give your style sheet a name that doesn't incorporate spaces. Beyond these basic rules, almost anything goes.
Linking your stylesheet to your pages
In order to make your web pages use the styles you've defined, you have to link them to your style sheet. The process can be accomplished in a few simple steps:
1. Switch FrontPage to Folders view by clicking on the Folders icon under the Views heading.
2. Select the HTML file (or files) you'd like the style sheet to apply to.
3. From the Format menu, select Style Sheet Links . You'll see the following dialog:
If you want to link all pages on your web site, select All pages : if, as is more likely to be the case, you only want to link the pages you've selected, leave the defaults Selected page(s) setting.
4. Click the Add... button and select the style sheet you want to link. Once you've done so, it should appear in the Link Style Sheet dialog as illustrated below.
5. Click the OK button.
That's it. Your style sheet has been linked to the pages you selected, and they should all, at this time, reflect the styles that you've defined.
You may find that you'll periodically have to tweak your style sheet to add new definitions, or to edit existing ones. Any changes you make to the style sheet will automatically be reflected in all of the pages linked to that sheet--the style sheet provides you with an extremely efficient way of changing the look of numerous web pages all at once.
Note : if you add more than one stylesheet to the Link Style Sheet list, you should be aware of the order in which the definitions will be used. Any element's attribute that is uniquely defined (i.e. not redefined in any other of the linked style sheets) will retain its style definition, no matter which of the style sheets it appears in. If, on the other hand, an element has an attribute defined in one style sheet and redefined in the next, the style to be used will be the style of the last definition in the list.