Cascading Style Sheets (CSS) allow you to format a web page by
setting font attributes such as small caps and changing the character
spacing, paragraph properties, and borders and shading for text
boxes. Style sheets can be applied to a web page in three ways:
- Embed a style sheet on a web page by listing the style
attributes at the top of the page.
- Apply inline styles within the web page to add a style
to individual elements of a page.
- Link to an external style sheet if several pages will
have the same styles. By using this method, style attributes are
only changed in one location and the changes are reflected on
many pages. These external style sheets are saved as a separate
file with the file extension .css.
Create an Embedded Style
- Select Format|Style from the menu bar.
- Click the New button to create a new style.
- Type a period (.) followed by a name containing no spaces for
the new style in the Name (selector) field. Below is an
example of a style that will create red text.
- Click the Format button to select an element the style
formatting will apply to. In this example, the font color will
be changed first so Font... is selected from the menu.
- From the Font dialog box, the font has been changed to
Arial, size to 10 point, and color to red. Click OK when
the changes have been made.
- Select other options from the Format button menu to change
more element attributes. When all the styles have been selected,
click OK on the New Style window and OK on the Style
Apply the New Style
To apply the style you have just created, highlight the text that
the style will be applied to. The style is listed in the style menu
on the formatting toolbar. Click the window and scroll down to select
Some formatting styles, such as font properties, borders and shading,
are automatically applied to certain elements such as portions of
text, paragraphs, and divisions. Other styles that are applied to
tables and form elements can be manually added as described below:
- Highlight the table or form element and select Format|Properties
from the menu bar.
- Click the Style... button on the properties window.
- Styles you have already created are listed in the Class
drop-down menu. Select one of these styles or click the Format
button to change another property.
- Press OK when finished.
Using Preset External Style Sheets
FrontPage comes with several preset styles that can be added to
web pages. It is also helpful to review the code of these preset
style sheets to gain a better understanding of CSS when you create
your own style sheets. Follow the steps outlined below to save one
of these styles as an external CSS to use on a web page.
- Select File|New|Pages from the menu bar and click the
Style Sheets tab.
- Highlight the choices to view descriptions for each of the styles
and click OK.
- The style sheet code will appear in the window. Save the style
sheet using the .css extension.
Create an External Style Sheet
To create an external style sheet from scratch, follow these steps:
- Select File|New|Pages, click the Style Sheets
tab, and choose Normal Style Sheet.
- A blank page will appear on the screen with a small Style
toolbar. Click the Style... button on the toolbar.
- Highlight an element from the Styles list that the style
will be added to and click the Modify... button. For example,
select the "body" tag from the list and we will change
the default text style for the page.
- Click the Format button on the Modify Style window
and select the elements that will be formatted. To change the
default text style in this example, select "Font...".
Choose "Arial" from the font list and "10pt"
from the size listing.
|TIP - As discussed
in the text tutorial, it is advantageous
to include several similar fonts in case a visitor to your
site does not have the particular font you chose on their
computer or is using a different operating system. Similar
sans-serif fonts are Arial, Verdana, Geneva, and sans-serif
while serif fonts are Times New Roman and Times. Type the
font names in the Font box above the scrolling menu,
separating each name with a comma.
Click OK when finished.
- Click OK on the Modify Style window.
- Notice on the style window that this style is now listed. Click
OK to exit the Style window or select another element
- Save the style sheet in .css format.
Link to an External Style Sheet
After you have created an external style sheet, it must be linked
to a web page for the styles to be applied to the page.
- Open a web page and select Format|Style Sheet Links from
the menu bar.
- Click the Add... button on the Link Style Sheet
- Select the .css file and click OK.
To remove an external style sheet link from a page, highlight the
style sheet in the list and click the Remove button.
Edit an External Style Sheet
- Open the .css file in FrontPage.
- Select Format|Style from the menu bar.
- Highlight the style from the list that needs to be changed and
click the Modify button.
- Make the necessary changes by selecting options from the Format
- Click OK when finished and save the style sheet.