Our Church

Pastor's Corner

Join Us

Our News

Event Calendar

Get Involved

Our Ministries

  Our Ministries

Our Ministries : Web Team : Web Standards: Style Sheets

This page outlines tips on how to use style sheets. This document was downloaded from http://www.du.edu/uts/classes/templates/styles.html.   

Working with Styles

Using styles is the key to success with these templates and Web work in general.  Styles minimize maintenance issues and give the common look and feel to the pages.  Styles are applied to text using one of the two methods described in the following paragraphs.

• You are encouraged to use styles
•  selecting specific fonts
• You are discouraged from using the increase or decrease size options

The style box

The style box is located at the left end of the Formatting Toolbar.  The Formatting Toolbar also contains common text functions such as Bold, Italic, Underline, Bullets, etc.  Apply a style using the style box as follows:

1. Highlight the text you want to format
2. Click on the drop-down style box
3. Select the HTML format, such as Heading 1, if necessary
4. Click on the drop-down style box
5. Select the custom style you want to apply.  Custom styles are have a period (.) as the first letter of the style name.

When styles are applied in this way the style is usually applied to the whole paragraph.  If you want to apply the style to just a portion of the text, use the format painter, described below. 

You can return any text to "plain" by highlighting it, then selecting "Normal" from the style box.

The format painter

When you want to apply a style to just a portion of your text, find another portion of the text in the format you want, then use the format painter to apply that style to your text.  The large colored letters at the beginning of each paragraph on this page are an example of text that was formatted with the style painter.

1. Highlight the text that is in the format you want
2. Click the Format Painter icon in the Formatting Toolbar (the paintbrush to the right of the copy/clipboard icon)
3. Highlight the text to which you want to apply the style

The span tag

You may on occasion have difficulty applying a style to several words inside a paragraph.  FrontPage does not always do a good job figuring out what you want in this case and frequently applies the style to the entire paragraph.  You can manually format parts of a paragraph with the <SPAN> tag.

1. Make a note of the name of the custom style you want to apply.  Omit the period at the beginning of the style name, but make certain all other parts of the name are identical, including upper and lower case.
2. Click on the HTML tab at the bottom of the screen.
3. Select Edit, Find from the menus and enter the text you want to format.
4. Type the following tags into your document
   <span class="yourstylename">your text here</span>
   EXAMPLE:
   <span class="bigcap">I</span> this document...
5. Click either the Preview or Normal tab to see the result

Modifying Styles

A number of tags that describe how text looks are defined in HTML (HyperText Markup Language) such as Heading 1, Heading 2.  Sometimes you might find it useful to create your own styles.  If you choose to do this, be aware of the following:

• Your styles should be applied in addition to styles such as Heading 1, Heading 2, etc. if you want your pages to be indexed by many search engines.  See "The Style Box" above.
• Styles are a newly emerging technology on the Web.  Not all browsers can accept them.  Always check your pages in both browsers and in older browser versions to make sure you can reach your target audience.  An excellent resource on stylesheet compatibility and stylesheets in general is available at Webreview.
• Selecting "fancy" fonts can backfire.  The font must be available on the computer where the browser is running or your page may look completely different.

Styles for the NewHopeUCC.com templates are stored in the file NewHopeUCC.css on the root of the site.  You can edit your customized style sheet as follows:

1. Use the File, Open option on the menus to open NewHopeUCC.css.  When you open the stylesheet a Style toolbar opens automatically.
2. Click the Style option on the Style toolbar
3. Highlight the style you want to modify
4. Click Modify, then Format to change the style.
5. After making changes or adding a new style, click OK until you return to the stylesheet.
6. Save the stylesheet
7. Close the stylesheet