Using Embedded Style Sheets

An embedded style sheet uses the same format as an external style sheet. The only difference between the two is that an embedded style sheet is embedded in the HTML of the page, whereas an external style sheet exists in its own file and is linked to a page (or multiple pages).

Embedded style sheets are often used to override styles configured in an external style sheet. For example, suppose that you have configured all of your pages with a white background and black text with red hyperlinks using an external style sheet linked. You have one page in your site where you want to use all the styles configured in the external style sheet, but instead of a white background with black text, you need a black background with white text. An embedded style sheet will allow you to override the background color and font color styles from the external style sheet while keeping all the other styles.

The HTML code in Listing 19.2 uses an embedded style sheet to specify a black background and white text for the page. The rest of the page is formatted using styles specified in the style.css external style sheet.

Listing 19.2 Overriding Styles with an Embedded Style Sheet

 <html> <head> <title>Overridden Style</title> <link rel="stylesheet" type="text/css" href="style.css"> <style> <!-- body         { color: #FFFFFF; background-color: #000000 } --> </style> </head> <body> <p>This text will appear white on a black background.</p> </body> </html>

As shown in Listing 19.2, the embedded style is specified using a <style> tag. To create an embedded style sheet in FrontPage, you use the Style dialog box just as you did for the external style sheet, but you apply the styles to a Web page instead of a CSS file.

Open the CSSTest.htm file.
Select Format, Style to display the Style dialog box.
Select HTML Tags in the List dropdown.
Select Body in the Styles list.
Click Modify to open the Modify Style dialog box.
Select Format, Border and click the Shading tab as shown in Figure 19.10.

Figure 19.10. The Shading tab allows you to control the background shading of a selector.
In the Background Color dropdown, choose a light color of your choice.
Click OK.
Select Format, Font in the Style dialog box.
In the Color dropdown, choose a darker color of your choice.
Click OK three times to commit your style changes.

FrontPage places the embedded style sheet directly under the <link> tag in the Web page so that the embedded styles will override the styles in the external style sheet, as shown in Figure 19.11.

Figure 19.11. This page is formatted with both an external and an embedded style sheet.

graphics/19fig11.gif

Listing 19.2 Overriding Styles with an Embedded Style Sheet

Figure 19.10. The Shading tab allows you to control the background shading of a selector.

Figure 19.11. This page is formatted with both an external and an embedded style sheet.