For example, you can create a style for a paragraph that specifies maroon 10-pt Verdana font on a yellow background. And you can keep on goingby setting spacing before and after the paragraph, making it right aligned, and even giving it a border. Once you're done creating your style, you pick a name for itMaroon-VerdanaGrafs, for exampleand then you can apply it to any paragraph with a click.
If you've worked with programs like Microsoft Word or Adobe FrameMaker, you may be familiar with this method of applying a style to specific elements. Similarly, in FrontPage, styles help you centralize the formatting of your Web pages. For instance, if you want all your Heading 1 paragraphs to be blue, you could apply blue color style to the <H1> tag using an external style sheet (more on the particular types of style sheets in a moment). After doing this only once in the style sheet, you'd then be able to change all the Heading 1 paragraphs throughout your site. Any paragraph with an <H1> tag anywhere in your site would then be blue.
Styles are that powerful, but the technology behind them isn't very complicated. A style is just a rule (or group of rules) for formatting some HTML. Rules are written in simple text, as in this example, which specifies that all Heading 1 paragraphs should be blue:
H1 {color: blue}
Some older browsers don't support CSS. Both Netscape Navigator and Internet Explorer supported CSS as of their 4.0 releases. In earlier versions of these browsers, your pages display fine, just without the styles.
The Scope of Your Styles
Once you create a style, you might wonder whether its rules extend to every page throughout your site. That depends on where you create a style rule. These snippets of text can live within the HTML on an individual page, or within a separate style sheet. As you'll see, location is everything.
Inline, embedded, and external styles
Styles can be applied at three basic levels:
-
Inline styles apply directly to one specific HTML tag on a page and affect whatever text the tag contains. Inline styles control only one element at a time. The style rule lives within the element's HTML tag.
-
Embedded styles (sometimes called internal styles) apply to an entire page. You'll use an embedded style to control elements across a whole page. These kinds of style rules live between the page's <head> tags (HTML 101).
-
External styles apply to multiple pages. These types of style rules live within a separate file called a style sheet. A style sheet is a simple text file (whose file extension is .css) composed of nothing but rules. Any Web pages that you link to a style sheet adopt the formatting rules contained within the style sheet. You can use external styles to control elements across multiple pages or even your entire site.
Creating an Inline Style
You've actually already created an inline style. You often do so when you apply formatting to an HTML tag. To see this for yourself, create a hyperlink Creating Hyperlinks). Right-click the link, select Hyperlink Properties, and then click Style. Click Format » Font. Change the color to Red, then close all the dialog boxes. Select the hyperlink and switch to Split view (The Main FrontPage Window). Your <a> hyperlink tag now contains a style tag:
<a style="color: #FF0000" href="info.htm">
Click here</a>
But FrontPage doesn't always create an inline style when you apply formatting. For instance, when you select some text and pick a font or color, FrontPage applies a <font> tag containing your formatting. The <font> tag adds extraneous decorative information that's considered outside the bounds of HTML, so it's losing favor on the Web (mostly because authors are always looking for ways to trim code out of their pages so they'll download as quickly as possible). Inline styles aren't much better than the <font> tag, as they still clutter your document with presentation details. But once you implement page- and site-level styles, you'll use inline styles only to override these other settings.
Style Selectors
Inline style rules are stored inside an element's tag, so a browser knows immediately what element they affect. When you work with embedded and external styles, on the other hand, you need to specify which elements the styles will control. To do so, you'll use a selector. Selectors are just different methods for telling FrontPage where to apply a style. There are a few different types of selectors.
Tag selectors
You can apply a style to any HTML tag, such as <H1>, <H2>, <p>, <table>, <a>, <li>, and even the <body> tag.
Look again at this sample style rule, which you might put in either an embedded or an external style sheet:
H1 {color: blue}
The style actually begins with the selector information, which is the <H1> tag. This is an example of a tag selector. In other words, this style rule is saying: Hey, browser. Wherever you find an <H1> tag (on this page, if you're using embedded styles; or throughout a collection of pages, if you're using an external style sheet), make it blue.
Class selectors (user-defined styles)
The ability to apply styles to tags gives you a lot of formatting power, but it doesn't cover all bases. You may also have your own unique text elements that don't have tags associated with them but which require their own distinctive style. For example, say you created a page to display a collection of t-shirts and you want to give all the shirt descriptions a uniform, special style all their own.
In this case, you'll have to create your own custom style, name it, and then go into your pages and manually apply the style name to each shirt description. Web professionals call these tags class selectors. FrontPage sometimes calls class selectors user-defined styles.
ID selectors
You may need to define a style for an individual element on a page, like a particular image or (as you'll learn in Layers) a layer. This type of selector uses an element's ID (located within its HTML tag) to apply a style to it. Unlike the other style selectors, FrontPage doesn't make it easy to create an ID selector even though the program supports applying styles to IDs. You might never need to use this selector. But if you do, and the ID is missing, you'll have to create it manually (which you'll learn how to do later in this tutorial in the "Applying a Class Style" section on Applying Styles).