APPLYING STYLES IN FRONTPAGE

A style is a set of formatting instructions identified by a unique name. Styles enable you to quickly format a group of page elements in one simple task. You can apply styles to most page elements, including text, graphics, and tables.  For example, you can tell the browser how to present these HTML elements:  the default font of the page, the size the text in a table, the color of the header text, the page's background color.

Style rules have a special syntax, or order of presentation, and special symbols.  The definition of a particular style contains a selector, like h1; a property, like color; and the value of that property, like blue.

selector  { property: value; }

h1  { color: blue; }

There are several (14?) ways of applying styles to your webpages.  Styles on a single page can be selected through the Style Box, created from various Format commands, or typed/pasted directly into the HTML code.  Styles affecting multiple pages are controlled from a separate file that is linked to these pages.

EXAMPLES OF CODING

1.  Built-In Styles

Built-in styles are frequently used formatting options available by default in the Style box on the formatting toolbar. These are in-line styles that appear in the HTML code next to the items they affect.

More

2.  In-Line Styles

Use an in-line style when you want to apply a style to individual elements on a page.  (I don't find this process particularly useful; if I want to make this type of  adjustment, it's easier to use the built-in style box.)

3.  Internal (Embedded) Styles

Use an embedded style sheet when you want to define styles for the current page.  The following code will make all of the paragraphs in the page red and all of the links blue:

<style type="text/css"> p { color: red; } a { color: blue; } </style>

Note that sometimes the names of the colors can be used; sometimes you will want to use the code numbers for colors.

More

4.  External or Linked Style Sheets (Cascading Style Sheets, or CSS)

Styles on multiple pages are text directions that appear in external, linked text files with the .css extension.  These directions are linked to the pages within the HTML code.  These links can be inserted through the command Format | Style Sheet Links or typed/pasted directly into the HTML code.

p { color: red; } a { color: blue; }

Notice the similarities with the code in the embedded style approach.

The link from a webpage to a style sheet is included in the document header (between the <head> and </head> tags, using the <link> tag.

<link rel="stylesheet" type="text/css" href="main.css">

In the style sheet, you would specify the style definitions you want to use throughout your website.

Here is an example of an external style sheet.

More

 

Page Changed 02/21/2006

Website Construction

StarkeTech