blind folio Chapter 21 with Cascading Style...

HowTo8 (8) / How to Do Everything with FrontPage 2002 / Plotkin/ 3364-3 / Chapter 21blind folio 1

Chapter 21 Format Your Sitewith CascadingStyle Sheets

P:\010Comp\HowTo8\364-3\ch21.vpTuesday, May 08, 2001 4:53:21 PM

Color profile: Generic CMYK printer profileComposite Default screen

How to…

■ Gain an understanding of Cascading Style Sheets

■ Write the syntax for Cascading Style Sheets in HTML

■ Create embedded style sheets

■ Create style classes and IDs

■ Set up linked and imported style sheets

FrontPage enables you to gain a very high degree of control over how theinformation on your web pages is presented by using an advanced formattingtechnique calledCascading Style Sheets(CSS). By making use of CSS, you canchange the font, indent, borders, numbering style, and positioning of virtually anytext in your page, as well as impact how various page elements (such as backgrounds)are presented. You can attach a style to a particular HTML tag or create independentstyles you can use whenever you wish.

Of course, FrontPage already provides a lot of tools for adjusting propertiesof text and graphics. However, CSS enables you to use formatting that ordinaryHTML does not, or that requires complex and difficult workarounds in HTML.You can create a look for your Web site by defining a Cascading Style Sheet andlinking that style sheet to as many of the pages in the Web site as you wish. Inaddition, changes to format and presentation of your Web pages are easier andquicker with Cascading Style Sheets. All you have to do is change the style, andany element that uses that style will change to match the modified style. Forexample, you can adjust the formatting of any bulleted items on the page. If youchange your mind later, a quick change to the style sheet associated with thebulleted items will cause all bulleted items to change to the new format.

FrontPage 2000 implements the World Wide Web Consortium’s CSS1specification. There is a more sophisticated and complex specification(CSS2), which is not currently implemented by any browser.

Understand Style SheetsStyle sheets are formatting instruction templates that you define yourself. Stylesheets come in various types, but essentially they embed special commands inHTML tags to change the appearance of the Web page. You can use multiple

2 How to Do Everything with FrontPage 2002

HowTo8 (8) / How to Do Everything with FrontPage 2002 / Plotkin/ 3364-3 / Chapter 21



styles to specify how your page will look, and the browser will apply the stylesin a strictly defined hierarchy to determine which formatting gets displayed. Thiscascadehierarchy gives Cascading Style Sheets its name.

There are four distinct types of style sheets: embedded, linked, inline, andimported styles:

■ Embedded style sheets The embedded style sheet is a style sheetspecification you write and insert into a specific Web page. The stylesheet specification sits in the style section of the Web page (betweenthe <style> and </style> tags). Adjusting a value in an embedded stylesheet changes that style for the entire page—and for any element thatuses that style.

■ Linked style sheets You can build a style sheet (just a text file with a.css extension) that includes nothing but style sheet commands, and linkone or more Web pages to this sheet. By changing the style commands inthe linked style sheet, you can change the look of all the Web pages linkedto that style sheet.

■ Inline style sheets An inline style sheet modifies the behavior of a singleHTML tag, a group of tags, or specified text block on a page.

■ Imported style sheets As with linked style sheets, you build a style sheetfile using style sheet commands. However, once the style sheet file is built,you can import it into a Web page. The imported style commands show up(like embedded style sheets) in the style section of the Web page. Usingimported style sheets enables you to add additional style commands to thestyle section of the Web page—something you can’t do with linked stylesheets. Essentially, you can combine an external (imported) style sheetwith local styles on the page, giving you added flexibility.

Determine Browser CompatibilityUse of Cascading Style Sheets is actually quite rare on the Internet as this is beingwritten. The main reason is that the implementation of this powerful formatting toolis inconsistent across the browsers, to say the least. Some of CSS1 is supported byInternet Explorer 3, additional commands are implemented in IE4, IE5, and IE 5.5,but the Mac versions are not completely consistent with the PC versions—andNetscape Navigator doesn’t support CSS until version 4. It also appears that Microsoftadded its own extensions (additional style commands) to the specification, supported

CHAPTER 21: Format Your Site with Cascading Style Sheets 3


21





only in IE5 and later. Oddly, FrontPage will generate style sheets with at least onecommand not supported by any browser (including IE5.5), as detailed later in thischapter. In addition, formatting implemented with Cascading Style Sheets can looksignificantly different between Internet Explorer and Netscape Navigator. Thus, youare well advised to consider your potential audience’s browsers before using CSS.

For a complete description of all style sheet attributes and theircompatibility with major browsers, see http://www.webreview.com/style/css1/charts/mastergrid.shtml. This resource also includes aglossary that explains the working of all CSS commands.

Look at Style Sheet SyntaxFrontPage makes it fairly straightforward to create the various types of style sheetswithout writing any code. However, it will be easier to understand the differencesbetween the types of style sheets if you look at a few examples of how style sheetsare created. For those who only want to work with Cascading Style Sheets throughthe help of FrontPage, skip to the “Create Style Sheets with FrontPage” sectionlater in this chapter.

Write Syntax for Embedded StylesEmbedded styles are very straightforward. The style commands are positionedbetween the <style> and </style> tags, which are located in the <head> section ofthe page. The style block controls the appearance of the entire Web page in whichit is embedded. As you can see from the example below, the style sheet commandsare embedded between HTML comment tags ( <!— and —>) to ensure that browsersthat don’t support the style commands aren’t confused by them. If readers withnon-CSS-compliant browsers view your page, they won’t see the formatting, butthey will at least be able to view the content.

The example below also illustrates some general characteristics of embeddedstyle sheets. The style information is enclosed in curly braces ({}) and is placedalongside the tag it applies to. Within the curly braces, the style is specified by sets ofattribute/value pairs. Examples of attributes arefont-family, color, andfont-size.Of course, the valid values for the “value” depend on the attribute.

Here is an example of an embedded style sheet:

<head>

<style>



</style>

</head>

If you assign a style to the <body> tag, it affects all the text on the page.To set the style for individual elements, such as heading 1 (h1) or standardparagraph text (p), you assign styles to those tags. These styles overridethose set for the <body> tag.

There are some things you need to understand about setting up your own stylesheets. First of all, you need to have an understanding of what the various HTMLstyle tags mean. For example, you need to know that the tag that controls heading 1text is <h1>, normal paragraphs are controlled by the <p> tag, and bulleted listsare controlled by the <ul> tag. (The name originally stood for “un-numbered list.”)This understanding is necessary even if you use FrontPage’s tools to create thestyles, since you still have to specify the HTML tag to apply the formatting to.

You also need to understand the hierarchy of HTML tags. For example, the<body> tag applies to all text on the page, and the <h1> tag overrides the <body>tag for heading 1 text. However, any style attributes that arenotoverridden by the<h1> tag remain at the value set by the <body> tag. For example, the <body> tagabove sets the color to 0000FF (blue). If the <h1> tag did not use a color specification,the heading text would also be blue. However, since the <h1> tag does in fact seta color (FF00FF, which is pink), the heading 1 text is pink. The normal paragraphtext (<p>) is green, but bulleted list items are still blue, because no <ul> tag (for theoverall list) or <li> tag (for individual list items) overrides the <body> tag formatting.

Finally, the code sample above is produced by FrontPage and is somewhatcryptic. For example, the color attribute is given by its RGB triplet: two digits forthe hexadecimal value of the red, green, and blue values for the color. However,you could substitute a color name (such as “red,” “maroon,” and so on) to makethe code easier to read. Not every color will work, however. According to theCascading Style Sheet specification, the following colors should be recognized:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red,silver, teal, white, and yellow.

Write Syntax for Inline StylesInline styles are useful for setting the properties of a single tag and its contents. Touse an inline style, you add the style attributes within the tag. The syntax uses the



STYLE keyword, followed by the style sheet commands (sets of attribute/valuepairs). For example, take the following snippet of HTML that places the words“North America” on the page, left-aligned with the heading 2 paragraph style:

<h2 align = "left"> North America </h2>

To add styles for defining a color specification and font style, you would addthe style commandsinline inside the <h2> tag:

<h2 STYLE = "color: maroon; font-style: italic" align = "left">

North America </h2>

Notice that the attribute/value pairs are all included inside a set of quotes,unlike the curly braces used for the embedded styles.

If an inline style conflicts with an embedded or linked style, the inlinestyle takes precedence.

Inline styles give you a great deal of control over the individual tags on a page,but they can also be quite tedious to set up, especially if you have to apply inlinestyles to a large number of HTML tags. If you want to modify the formatting fora large block of text on a page, you can use the <div> tag. Like inline styles forindividual tags, you add the STYLE keyword followed by the attribute/value pairs(in quotes) to the <div> tag. Any text between the <div> and </div> tags areaffected by the style:

<div STYLE = "font-size: 16pt; color: blue">

A block of HTML code

</div>

The nice thing about adding the style to the <div> tag is that all the HTML codeis affected—you can have multiple headings, paragraphs, and bulleted lists in theincluded HTML block, and they will all take on the specified style. Just rememberthat any tag stylenotoverridden (for example, the bulleting in a bulleted list) willremain the same. Also, an inline style applied to a tagwithin the <div> section (suchas a style applied to a <ul> bulleted list tag) will override the div style.

You can specify a div style within the style section at the top of the document.If you do, any HTML located between the <div> and </div> tags in the page willtake on the style specified by the div style in the style section. Because the div







21style is inside the style section, you must use curly braces to specify the style.The div style in the style section might look like:

<style>



</style>

Later in the document, you might have the following HTML:

<div>

<h2> North America </h2>

</div>

The text “North America” will be rendered in 16-point blue text because it iswithin the <div> tags, and div style in the style section was set to 16-point blue text.

Another tag that is useful for inline styles is the <span> tag. You can insert the<span> tag and the STYLE keyword within another tag, effectively changing onlya portion of the text within the tag. For example, say you wanted to change only aportion of the text for a standard paragraph text (<p>) to another color. You coulduse the <span> tags as follows:

<p> This part of the text is the default color, <span STYLE =

"color:maroon"> while this part of the text is maroon </span> and

the rest of the text is back to the default color. </p>

The text between the <span> and </span> tags will be rendered in maroon.Because the style sheet is embedded within a tag (in this case, the <span> tag),the style instructions are in quotes.

As with the <div> tag, you can use the <span> tag in the style section todefine the style for any text wrapped in the <span> tags in the body of thepage. The style sheet associated with the <span> tag in the style section isenclosed in curly braces:<span> { font-size: 16pt; color: blue}.

Write Syntax for Linked Style SheetsAs mentioned earlier, you can link a style sheet to a Web page to use the defined stylesin the external style sheet. The external style sheet is nothing more than a text file with





a .css ending. To create a style sheet, simply type the style commands (without thestyle section) into the file (see Figure 21-1). I chose to put the curly braces on theirown line for ease of editing, but that is purely a matter of personal preference.

FrontPage includes some sample style sheet templates you can use tocreate your own external style sheets. We’ll cover those shortly.

Once you have created an external style sheet, you can link it to a Web pageby placing the following code in the <head> section of a Web page:

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

FIGURE 21-1 A text file with a .css ending defines the styles available in an externalstyle sheet.





21As you will see later, FrontPage can help you set this up.

Write Syntax for Class-Based StylesClasses enable you to create format variations for a tag and use these variationsfor that tag anywhere on a page. If you define the class in the style section of apage (embedded), they are available only on that page. However, you can alsodefine the class on an external style sheet and link it to all the pages in whichyou want the class available.

The code format for a class uses the tag name, a period, and the class name.This combination is then followed by the style definition:

<style>



</style>

The above example defines a class called “border” for the <h1> tag. The styleadds a solid maroon border to the heading 1 style. To apply the style, you woulduse the following:

<h1 class="border"> Heading 1 Text</h1>

This applies the solid maroon border to the rather unimaginative “Heading 1Text” text. Notice that even though the class definition is fully named “h1.border”in the style section, it is referenced on the page only by the class name without thetag. It is important to know this because a class can only be applied to the tag forwhich it was originally defined. If you apply the class to another tag (for example,<p class=“border”>), nothing will happen—the paragraph text willnotchange tomatch the border class style. This, of course, assumes that you did not also definea border class for the <p> tag.

There is a variation on the class definition that can be applied toanytag. To dothis, create the class in the style block just as described above, but leave out the tagname. For example, the border class would be defined as

border {border-style: solid; border-color: #800000 }





You can apply this independent style to any tag. To apply it to the <p> tag,for example, you would use

<p class="border"> Boxed paragraph text </p>

Create Style Sheets with FrontPageOf course, if you really wanted to write all this code, you wouldn’t have boughtFrontPage in the first place! Fortunately, FrontPage makes it relatively straightforwardto create styles and apply those styles to Web pages without writing any code. Usingthe tools provided by FrontPage, you can

■ Create styles for tags using a dialog box

■ Set up classes (both tied to tags and independent) and use thoseclass-based styles for various elements in the Web page

■ Link an external style sheet file to a Web page

Most of the formatting tools you have already seen and used are available tohelp you define your styles. FrontPage enables you to define four sets of propertiesusing dialog boxes that should be familiar to you:

■ Text properties Using the standard Font dialog box, you can set the font,font style (regular, italic, bold), font size, color, and various effects. Youcan also set character spacing. For more information on formatting textusing the Font dialog box, see Chapter 2.

■ Paragraph properties Using the Paragraph dialog box, you can adjustthe text alignment (default, left, center, right), indentation before and afterthe paragraph, spacing before and after the paragraph, line spacing, andword spacing. For more information on formatting paragraphs using theParagraph dialog box, see Chapter 2.

■ Borders and shading Using the Borders and Shading dialog box, youcan set up border styles (solid, dotted, dashed, and so on), border color,width, and padding. You can also apply a background and foregroundcolor, set up a background picture, and specify both the position of the



background picture and how it should repeat. For more information onsetting up borders and shading, see Chapter 2.

■ Numbering Using the Bullets and Numbering dialog box, you canspecify a picture bullet, select a bullet style, or select from a variety ofnumbering schemes for the bullets. For more information on setting upbullets and numbering, see Chapter 2.

■ Position Using the Position dialog box, you can adjust the wrapping styleof text (none, left, and right) as well as the type of positioning—none, absolutepositioning, and relative positioning. You can also set the coordinates andsize of a particular element as well as the layering (z-order), although thiswould be of little use for style sheets. For more information on setting upposition, see Chapter 13.

There are certain style commands—such as the table layoutcommands—for which FrontPage does not provide any dialog boxsupport. So, if you want to use those style commands, you’ll have tohand-code them, which means that if you opted to skip the sectionabove, you’ll have to go back! (Do not pass Go, do not collect $200.)

Create an Embedded StyleAs we discussed earlier, embedded styles are those defined within the style sectionin the <head> section at the top of a Web page. FrontPage provides a decent set oftools for building embedded styles. To create embedded styles for a Web page, usethe following steps:

1. Open the page to which you want to apply the styles, and add any text youwant to the page. Strictly speaking, you don’t have to add the text first, butit sure makes it easier to see the changes as you make them.

2. Choose Format | Style to display the Style dialog box (see Figure 21-2).

3. From the List drop-down list (near the bottom of the box), choose whetheryou want to modify one of the standard HTML tags (HTML Tags) or auser-defined tag (User-Defined Styles). Once you make a choice from thelist, the Styles list above it displays all the tags that match the criteria.



21





Initially, the User-Defined Styles list is empty, but as you modify the stylesof various tags, they appear in the list. You can also pick a modified tagfrom the main list (HTML Tags in the list), but it is easier to find tags youhave modified in the User-Defined Styles list.

4. The Styles list displays all the HTML tags that FrontPage supports and thatcan have styles applied to them. Pick the tag to which you want to apply astyle. Good ones to start with are “p” for paragraph or “h1” for heading 1,assuming you have those elements on your page.

5. Click the Modify button to open the Modify Style dialog box (seeFigure 21-3). This example shows the Modify Style dialog box afterchoosing h1.

6. Click the Format button to display a list of the formatting options.





21

FIGURE 21-3 Use the Modify Style dialog box to adjust the style of the chosen tag.

FIGURE 21-2 Choose a tag and modify the style for that tag using the Styledialog box.





7. Pick the option you want, and use the resulting dialog box (Font, Paragraph,Borders and Shading, Bullets and Numbering, or Position) to specify theproperties to be applied to this style. Continue picking options using theFormat button and configuring the dialog boxes until you have the stylefully defined. As you make each change, the Preview section of the ModifyStyle dialog box shows a sample of what your styled text will look like.

8. Click OK to finish defining the style. FrontPage closes the Modify Styledialog box and returns to the Style dialog box. Now, however, the tagwhose style you just modified appears in the User-Defined Styles list.

You can see a both a paragraph preview and a character preview in theStyle dialog box. These previews are visible whether you pick the tag fromthe User-Defined Styles list or the HTML Tags list.

Not seeing the style change you expected? Check to see if the Web pagehas a theme applied to it (right-click the page, choose Theme from theshortcut menu, and check the contents of the Themes dialog box). A themeoverrides any style you define. If you want to apply your own styles, youmay have to set the theme to None.





21

Create and Apply Styles Using ClassesIf all you need is a single style for a given tag, using a single embedded style forthe tag (as discussed previously) is simple and straightforward. However, whathappens if you want multiple style options for a given tag? For example, perhapsyou want one style for a bulleted list (<ul>) that uses blue normal text, whileanother bulleted list style is green italicized text. The easiest way to accomplishthis is to define multiple style classes, attaching the class to the appropriate tag(the <ul> tag in this case). Once you’ve defined the tag’s class, FrontPage makesit easy to apply that class-based style to any text to which the tag applies.

Create a Style ClassCreating a style class is not very different from redefining the base style for a tag.You just need to add the class name to the tag name when defining the style. Todefine a new style class, use the following steps:

1. Open the page to which you want to apply the styles, and add any text youwant to the page. As before, you don’t have to add the text first, but it doesmake it easier to see the changes as you make them.

Change a Modified Style

If you want to change a style you’ve already modified, or delete a modificationaltogether (reverting to the default style for that tag), open the Style dialog boxby choosing Format | Style and select User-Defined Styles from the Listdrop-down list.

To modify a style, pick the tag from the Styles list, and click Modify toreopen the Modify Style dialog box. Make any changes you want from theavailable dialog boxes by clicking the Format button. Once you’re done,click OK in the Style dialog box to apply your changes immediately.

To remove any custom styles, select the tag from the Styles list and clickDelete. The tag disappears from the User-Defined Styles list. Click OK tocomplete the change. The tag now has the default styles for that tag and stillappears in the list of All HTML Tags—so you can always go back later andmodify the style for that tag again.





2. Choose Format | Style to display the Style dialog box.

3. From the Styles list for HTML Tags, pick the tag you want to add a class to.

4. Click the Modify button to open the Modify Style dialog box.

5. Click the Format button to apply formatting as discussed previously.

6. When you are applying style formatting, click OK to return to the Styledialog box.

7. Place the text insertion point at the end of the tag name in the Name (Selector)field. Type a period and the name of the class (see Figure 21-4 for an example).

The class name should begin with a letter and should not include any spaces.

8. Click OK to close the Modify Style dialog box.

FIGURE 21-4 Define a new style class for a tag by typing the class name into theName field, separated from the tag name by a period.





21If you view the style section of the Web page, you’ll see the class definition.For example, if you defined a class for the list item (<ul>) tag calledgreenitalics,it might look like this:

ul.greenitalics {color: #008000; font-style: italic }

Apply a Style Class to a Web PageOnce you have a defined a class for a tag, applying that style to text on a Web pageis simple. Either type new text or click in the existing paragraph to which you wantto apply the style. Click the Style drop-down list at the left end of the Formattingtoolbar. Scroll down past the standard style choices. At the bottom of the list, youwill find your new class-based styles (see Figure 21-5). When you open the Styledrop-down list, the style (as shown in Figure 21-5) doesnot include the stylename—only the class name. Once you select the style from the list, however, thestyle name displayed once the list closes includes both the descriptive tag name(Bulleted List in our example) and the class name, separated by a period.

FIGURE 21-5 The bottom of the Style drop-down list displays any class-based styles,which you can apply by simply picking the style from the list, just likeany other style.



Styles based on certain tags will not show up in the Style drop-down listeven if you define them using the methods discussed previously—and eventhough they do show up in the style section at the top of the HTML view ofthe Web page. The list item (<li>) tag is an example. To apply a class-basedstyle for one of these tags, you’ll have to hand-code it into the HTML oruse an inline style, explained later in this chapter.

As with embedded styles, the class-based style overrides only the tagformatting you specify—the rest of the tag’s formatting remains the same. Forexample, even though you may have defined theul.greenitalicsclass as havinggreen italicized text, the balance of the default formatting for the <ul> tag (whichincludes a bullet) remains unchanged. Thus, if you apply theul.greenitalicsclass-based style to text that is not included in a bulleted list, the text will beconverted to a bulleted list.

If you want to reapply the normal style for a tag, removing the class-basedstyle, pick a different style entirely (such as Normal), then pick the normalstyle for the tag from the Style drop-down list. For example, to remove theBulleted List.greenitalics style and return to a normal Bulleted List, pickNormal from the Style drop-down list in the Formatting toolbar, thenpick Bulleted.

Create a New Style DefinitionWhat if you want to create a class style definition that simply adds (or overrides)just the formatting you specify to any other tag and not have it change the tag type?This is really no harder than creating a class definition that is attached to a tag(discussed previously). With these independent class-based styles, you can add thestyle to any tag, and just the formatting you specified is applied to the text. Forexample, if you build an independent class-based style that applies a green colorand italics style, you can apply that style to anything: regular text, heading 1, abulleted list, or anything else. The green color and italics effect is applied to thattext, and nothing else about the text is changed. Unlike applyingul.greenitalics(from the previous example) to the text, an unwanted bullet is not added, and thetext is not converted to a bulleted list.

To create an independent style, use the following steps:

1. Open the page in which you want the independent style available.

2. Choose Format | Style to display the Style dialog box.





3. Choose New to open the New Style dialog box. Except for the title, this dialogbox is identical to the Modify Style dialog box, previously displayed inFigure 21-3.

4. Type the style name into the Name field. Unlike a class that is attached toa tag, you don’t use a tag or period—just type in the style name.

5. From the Style Type drop-down list, choose whether the formatting isapplied to just text (Character) or the entire paragraph (Paragraph).

6. Click the Format button and specify the formatting options for theindependent style as discussed earlier.

7. When you are done, click OK to return to the Style dialog box. The newstyle appears in the Styles list for User-Defined Styles (see Figure 21-6). Ifthe Style Type was set to Character, the name of the new style is precededby the <span>tag and a period. If the Style Type was set to Paragraph, thename of the new style is prefixed by a period, but not a tag.

8. Click OK to close the Style dialog box.



21

FIGURE 21-6 The independent style (really a class) is displayed with a leading periodon the Style dialog box.





If you look at the HTML view for the Web page, the new style is present in thestyle section at the top of the Web page. If you defined a paragraph-type bordered,red, italics style called BorderRedItalics, it might look like this:

.BorderRedItalics {color: #FF0000; font-style: italic;

border-style: solid }

If you defined a character-type bordered, red, italics style called BorderRedItalics,it might look like:

span.BorderRedItalics {color: #FF0000; font-style: italic;

border-style: solid}

You apply the independent style just as you would a tag-based class style:Click in the paragraph where you want to apply the style, and pick the style fromthe Style drop-down list in the Formatting toolbar.

Notice that the style is displayed without a tag or a period, but with an indicator as towhether it is a paragraph-type style (paragraph symbol) or a character-type style (noicon). However, after you pick the style from the list, the style is either displayed in theStyle drop-down list appended to the span tag (character-type) or appended to whateverthe default style was for the text (Normal in this example).



This indicates that the independent style adds (or overrides) its own formattingto the normal tag formatting. Because of this, independent styles add considerableflexibility to your use of style sheets.

Apply a Class-Based Style Using Dialog BoxesYou can also apply a class-based style (either attached to a tag or independent) byusing the Style button present in many of the formatting dialog boxes. Strangely,not all the formatting dialog boxes even have a Style button. For example, the Fontdialog box does not. However, the following dialog boxes do include a Style button:List Properties, List Item Properties, Page Properties, Table Properties, and CellProperties.

To apply a class-based style using a dialog box, use the following steps:

1. Click anywhere in an element that uses one of the formatting dialog boxeslisted above. For example, you can click in a bulleted list.

2. Right-click and choose the formatting dialog box from the shortcut menu.For example, choose the List Properties dialog box from the shortcut menu.

3. Click the Style button to open the Modify Style dialog box. Choose theclass you want to apply from the Class drop-down list (see Figure 21-7).

4. Click OK to close the Modify Style dialog box, then click OK to close theformatting dialog box (List Properties in this example). The element youselected takes on the class-based style you chose.

Except for independent class-based styles, the style you choose must havebeen defined for the tag that controls the element’s formatting. For example,if you are formatting a bulleted list, you must pick a class-based style thatwas defined for the <ul> tag. If you pick a class-based style that wasdefined for a different tag, nothing happens—formatting of the elementdoes not change. Unfortunately (as you can see from Figure 21-7), theitems in the Class list do not include the tag as part of the class name.Thus, you have to remember which classes go with which tags.



21



If you view the HTML view for the Web page, you will see a reference to theclass in the tag for the element. For example, if you applied the class-based styleul.greenitalicsto a bulleted list, the <ul> tag at the beginning of the list might looklike this:

<ul class="greenitalics">

Remember that the actual definition for the class-based style (in this example,ul.greenitalics) is contained in the style section of the Web page. Only thereference to the class is in the tag for the element.

Generate an Inline Style Using Dialog BoxesAn inline style is a style applied directly to a tag, without defining a style or classin the style section of the Web page. You can think of inline styles as “quick anddirty”—you need a style you thought was there, and because it wasn’t available,you create it on the fly. Inline styles have the advantage of being quick to build,but they also dirty up your HTML code, and are not reusable anywhere else onthe page or Web site.



FIGURE 21-7 Pick the class-based style you want to apply from the Classdrop-down list.





21There is one other advantage to inline styles: They are the only onespreserved when you copy text from one Web page to another. So, if youspend a lot of time defining styles for chunks of text you intend to copy toanother page, inline styles are the way to go.

You generate an inline style using the formatting dialog boxes that have a Stylebutton. Use the following steps:

1. Click anywhere in an element that uses one of the formatting dialog boxeslisted above. For example, you can click in a bulleted list.

2. Right-click and choose the formatting dialog box from the shortcut menu.For example, choose the List Properties dialog box from the shortcut menu.

3. Click the Style button to open the Modify Style dialog box.

4. Type a name for the inline style into the Class drop-down list. This stepis different from the previous section, where you picked an existingclass-based style.

5. Click the Format button and apply the style formatting you want to use,as discussed previously.

6. When you have finished defining the formatting, click OK to close theModify Style dialog box, and click OK again to close the formatting dialogbox (List Properties in this example).

The inline style is applied to the selected element. If you look at the HTMLview of the Web page, you’ll see the inline code in the tag. For example, if youselected a bulleted list and set the font formatting to be maroon color and boldwith the class name of MaroonBold, you might see the following:

<ul style="color: #800000; font-weight: bold"

class="MaroonBold">

If you reselect the item (a bulleted list in this example) and reopen theModify Style dialog box, you will see the class name (MaroonBold) youspecified in the Class field. However, if you drop down the Class drop-downlist, you will not see this class in the list of values, nor will you see thisparticular class if you open the Modify Style dialog box with any otherelement selected—including another element of the same type (in this case,another bulleted list). This behavior means that this inline class-based styleis not reusable anywhere else.





Set Up Linking and Importing of Style SheetsSo far in this chapter, we have concentrated on style sheets that are internal to theWeb page to which they apply formatting. However, you can also create an externalstyle sheet, and either link a Web page to the external style sheet or import theexternal style sheet into a Web page.

Create a Style Sheet for Linking or ImportingAs mentioned earlier, an external style sheet, for either linking or importing, is justa page with nothing on it but style definitions. A sample of such a sheet is shownin Figure 21-8.

FIGURE 21-8 An external style sheet can be linked to Web pages or imported intoWeb pages.



The page (really just a text file) must have the ending .css in order for FrontPageto recognize it as an external style sheet. It does not use the style section; instead, itjust contains various style commands implemented with curly braces.

Since this “Web page” is really just a text file, the tabs (for switchingbetween normal, HTML, and preview modes in Page view) are missing.This is because there really is just one view, the HTML view.

To create an external style sheet, use the following steps:

1. Choose File | New | Page or Web to open the New Page Or Web task pane.Choose Page Templates from the task pane to open the Page Templatesdialog box.

2. Click the Style Sheets tab (see Figure 21-9).

3. Pick the type of style sheet you want to start with. FrontPage providesa number of prebuilt style sheets, including a blank one (Normal StyleSheet). A description is available for each style sheet template, butnot a preview.

4. Click OK to close the Page Templates dialog box and create the newexternal style sheet. If you chose one of the templates, the new page willcontain prebuilt style definitions. If you chose the Normal Style Sheet, thepage will be blank.

5. Make any modifications to the Style Sheet code that you want.

6. Save the new page by choosing File | Save, specifying a filename in theFile Name field, and clicking OK. Unlike normal Web pages, you can’tset any page properties (including a title) for an external style sheet.

When you open a style sheet (with a .css ending), the Style toolbar isdisplayed. This toolbar isn’t very interesting because it has only onebutton, labeled Style. Click on the Style button to open the Style dialogbox (discussed previously).

Link a Style Sheet to a Web PageYou can link as many style sheets as you want to a single Web page. This enablesyou to isolate different types of formatting into different external style sheets.



21



However, if two style sheets contain conflicting formatting, the last one in the listof linked style sheets takes precedence.

To link an external style sheet to a Web page, use the following steps:

1. Activate the Folder view by choosing View | Folders or clicking theFolders icon in the View bar.

2. In the Folder view, select all the Web pages to which you are going to linkthe external style sheet. To make multiple selections, click the first Webpage, hold down theCTRL key, and click the additional Web pages. If youare going to link the external style sheet toall the pages in the Web, youdon’t need to select any pages.

If you are just going to link style sheets to the currently visible page,you can skip steps 1 and 2, and just make sure the page is visible inPage view.



FIGURE 21-9 Use the Style Sheets tab of the New dialog box to pick the type of stylesheet (including a blank one) you want to work with.



3. Choose Format | Style Sheet Links to open the Link Style Sheet dialog box,shown below. If you selected any pages before beginning the linkingprocess, the Selected Page(s) option is selected. If you didn’t select anypages, the All Pages option is selected.

4. Click the Add button. Choose the .css file from the Select Hyperlink dialogbox that appears, and click OK to return to the Link Style Sheet dialog box.

You can add more than one external style sheet to the Link Style Sheetdialog box. If you do, you can reorder them using the Move Up and MoveDown buttons. Order is important because the external style sheets arelinked in this order. As mentioned earlier, in case of any style conflicts,the last style sheet that contains the conflicting style has precedence.

5. Click OK to close the Link Style Sheet dialog box and link the stylesheet(s) to the selected Web pages.

If you inspect the HTML version of a Web page with a linked style sheet,you’ll see something like the following in the head section of the Web page (thename of the style sheet is BarsStyleSheet.css):

<link rel="stylesheet" type="text/css"

href="BarsStyleSheet.css">

To modify the order of the links, remove a link, or add another one, simplyopen the Web page containing the link and choose Format | Style SheetLinks to reopen the Link Style Sheet dialog box. Use the Remove buttonto remove a link.



21



Import a Style DefinitionFrontPage does not provide an automated (or even semiautomated) procedure forimporting style sheets. To import an external style sheet, you’ll have to hand-modifythe HTML code for the page. You do this by adding the @import command to the stylesection of the Web page. For example, if you wanted to import the BarsStyleSheet.cssstyle sheet into a Web page, you would add the following code:

<style>

@import URL ("BarsStyleSheet.css")

</style>

Of course, you could place many more style sheet commands between thestyle tags.

CSS Attributes Supported by BrowsersFor an up-to-date reference of browsers and their compatibility with CascadingStyle Sheets, check out this amazingly useful reference:

http://www.webreview.com/style/css1/charts/mastergrid.shtml

This reference chart provides compatibility information on all major browsersand their multiple versions.

Date post:	20-Feb-2020
Category:	Documents
Upload:	others
View:	4 times
Download:	0 times

blind folio Chapter 21 with Cascading Style...

Documents