|
|
Cascading Style Sheets |
|
|
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 window.
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 the style.
Inline Styles
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 to modify.
- 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
dialog box.
- 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 button menu.
- Click OK when finished and save the style sheet.
|
|