Previous Page TOC Next Page



16


Using Style Sheets


by William Robert Stanek

Total control over every aspect of your page is what style sheets offer, and the Cascading Style Sheets level 1 specification lives up to the promise. With style sheets, you can set specific font sizes, types, and colors anywhere in your Web page. You can add and change background colors to highlight sections of text. You can control margins and spacing around text and graphical elements. You can even control the placement of design elements and the style of borders to display around images.

What are Style Sheets and How are They Used?


Style sheets are a dream come true for Web Publishers who wished their Web pages could use the same advanced design and layout techniques offered by popular desktop publishing software. With style sheets, you can specify design and layout parameters for every element in your Web page. If you want all level 1 headings to be in 45-point Times Roman, you simply add a single specification to your page and all level 1 headings in the page are displayed in 45-point Times Roman. If you further want all headings displayed in brown and paragraph text in blue, you can add this specification as well.

Adding a style sheet to your page is easier than you may think. Compare the page shown in Figure 16.1 to the page shown in Figure 16.2. Both pages have the same contents. The first page uses a style sheet that gives the page a unique look. The second example is a plain-old run-of-the-mill HTML page without a style sheet. The difference between these pages is striking, especially if you view them in living color with your browser.

Figure 16.1. Adding style to your pages.

Figure 16.2. A page without style.

The style sheet used in Figure 16.1 sets the following design parameters:

While this chapter puts style sheets in the spotlight, FrontPage 97 does not support the cascading style sheet specification. In earlier chapters, you saw that FrontPage allows you to specify font type, color, and size. So you may be wondering what the difference is between the built-in support and style sheets. What style sheets offer you as a Web publisher is an additional option and, regarding some attributes such as font size, absolute rather than relative control. For font size, this means that instead of relying on the user's browser to change the size of text relative to other text, you can specify a specific point size for the text.

As you read through this chapter, you will find many additional areas in which style sheets provide better control over aspects of layout and text. Because FrontPage does not support style sheets and has problems working with pages that have style sheets, do not open pages with style sheets in the FrontPage Editor. Instead, add style sheets after you create a page in the FrontPage. To do this, you will need to enter actual markup code, which is why this chapter examines the complete code listings for the examples.

Listing 16.1 shows the complete markup for the page shown in Figure 16.1.

Listing 16.1. Using style sheets.




<HTML>



<HEAD>



<TITLE>Designing Powerful Pages With Style Sheets</TITLE>



<STYLE>



H1  {font: 45pt Times; color: brown}



P  {font: 12pt Times; color: blue; text-indent: 1in; margin-right: 1in}



BLOCKQUOTE  {font: 10pt Helvetica; color: black; background: yellow}



</STYLE>



</HEAD>



<BODY BGCOLOR=#FFFFFF>



<H1 ALIGN=CENTER>Designing Great Pages</H1>



<P>&nbsp;</P>



<P ALIGN=RIGHT>Pages with high visual impact will leave a lasting impression



 on readers. High visual impact does not necessarily correlate to high



 resolution graphics. Some of the most visually stunning pages contain



 no graphics at all. They achieve their impact from simplicity of design.



 They use screen space, color, fonts and headings to their advantage.</P>



<P ALIGN=RIGHT>The best writing looks effortless. Words seem to flow straight



 from the writer's pen. The same is true about the best designed pages.



 Well-designed pages look effortless. They are organized in a way that is



 coherent and flowing.</P>



<P ALIGN=LEFT>



<BLOCKQUOTE>The secret to making words seem to flow effortlessly



 is simple. Good work is the result of hard work-careful editing, revision



 and proofreading. Creating a single polished page may take hours.



 Well-designed pages are also the result of hard work. Designs that seem simple



 and natural to the reader are often the result of intense efforts to make



 them seem this way.-



<FONT SIZE=-3>William R. Stanek</FONT>



</BLOCKQUOTE>



</P>



</HTML>

NOTE

For now, don't worry about the syntax used to set style sheet parameters. You will find detailed instructions later in the chapter.


If you examine Listing 16.1, you will see that nine design parameters are set with the following five lines of markup code:




<STYLE>



H1  {font: 45pt Times; color: brown}



P  {font: 12pt Times; color: blue; text-indent: 1in; margin-right: 1in}



BLOCKQUOTE  {font: 10pt Helvetica; color: black; background: yellow}



</STYLE>

Defining a style sheet within the page header is only one way you can add style to your Web pages. If you define your style parameters in a separate document, you can import this style sheet into any page at your Web site. This allows you to apply a single style sheet to multiple pages, which adds a consistent look and feel to your Web pages.

Using the same parameters in the earlier listing, you can create a document called Style1 by using the following contents:




H1  {font: 45pt Times; color: brown}



P  {font: 12pt Times; color: blue; text-indent: 1in; margin-right: 1in}



BLOCKQUOTE  {font: 10pt Helvetica; color: black; background: yellow}

After saving the style sheet as standard ASCII text, you can then import the style sheet into your Web page as shown in Listing 16.2.

Listing 16.2. Using imported style Sheets.




<HTML>



<HEAD>



<TITLE>Designing Powerful Pages With Style Sheets</TITLE>



<STYLE>



@import url(http://www.tvp.com/Style1);



@import url(http://www.tvp.com/Style2);



@import url(http://www.tvp.com/Style3);



</STYLE>



</HEAD>



<BODY BGCOLOR=#FFFFFF>



 . . .



</HTML>

TIP

The style sheet specification allows you to import style sheets from multiple sources. If a conflict occurs—for example, one style sheet sets the color of paragraph text to blue and the another style sheet sets the color to brown—the specification provides clear rules to handle the conflict. More on this later in the section titled, "Cascading Style Sheets."


Another way to reference external style sheets is with the <LINK> tag and its relationship attribute REL. Referencing an external style sheet with the <LINK> tag is shown in Listing 16.3.

Listing 16.3. Referencing an external style sheet.




<HTML>



<HEAD>



<TITLE>Designing Powerful Pages With Style Sheets</TITLE>



<LINK REL=STYLESHEET HREF="Style1" >



</HEAD>



<BODY BGCOLOR=#FFFFFF>



 . . .



</HTML>

Sometimes you only want to add a few style parameters to your page. No problem; the style sheet specification allows you to use in-line style notation to add style elements wherever and whenever you want. Listing 16.4 shows an example using the in-line notation.

Listing 16.4. Using in-line style references.




<HTML>



<HEAD>



<TITLE>Designing Powerful Pages With Style Sheets</TITLE>



</HEAD>



<BODY BGCOLOR=#FFFFFF>



<H1 ALIGN=CENTER STYLE="font: 45pt Times; color: brown">



Designing Great Pages</H1>



<P>&nbsp;</P>



<P ALIGN=RIGHT STYLE="font: 12pt Times; color: blue;



¬text-indent: 1in; margin-right: 1in">



Pages with high visual impact will leave a lasting impression



 on readers. High visual impact does not necessarily correlate to high



 resolution graphics. Some of the most visually stunning pages contain



 no graphics at all. They achieve their impact from simplicity of design.



 They use screen space, color, fonts and headings to their advantage.



<P ALIGN=RIGHT STYLE="font: 12pt Times; color: blue;



¬text-indent: 1in; margin-right: 1in">



The best writing looks effortless. Words seem to flow straight



 from the writer's pen. The same is true about the best designed pages.



 Well-designed pages look effortless. They are organized in a way that is



 coherent and flowing.</P>



<P ALIGN=LEFT STYLE="font: 12pt Times; color: blue;



¬text-indent: 1in; margin-right: 1in">



<BLOCKQUOTE STYLE="font: 10pt Helvetica; color: black; background: yellow">



The secret to making words seem to flow effortlessly



 is simple. Good work is the result of hard work-careful editing, revision



 and proofreading. Creating a single polished page may take hours.



 Well-designed pages are also the result of hard work. Designs that seem simple



 and natural to the reader are often the result of intense efforts to make



 them seem this way.-



<FONT SIZE=-3>William R. Stanek</FONT></BLOCKQUOTE>



</P>



</HTML>

When you place in-line style notations throughout your page, you lose the greatest benefit of style sheets: the ability to separate the presentation from the content. Still, there are many times when defining in-line style parameters makes sense, especially if you want to override a default style set in the page header.

Examining the <STYLE> Tag


Using the <STYLE> tag, you can add style sheet parameters to the header of your Web pages. The only attribute for the <STYLE> tag is the TYPE attribute, which assigns a style sheet language. If you do not set the attribute to a specific value, this default for the Cascading Style Sheet specification is generally assumed:




<STYLE TYPE="text/css">

If you assign a different style notation, it must be a recognized style notation in the browsers document type definition, such as dsssl-lite.


NOTE

DSSL is the Document Style Semantics and Specification Language. This very complex style notation is not well-suited to use on the World Wide Web, which is why a subset of DSSL called DSSL Lite was defined. You may hear more about DSSL or DSSL Lite as the style sheet specification evolves.


Style assignments you make between the begin and end STYLE tags override the browser's defaults and are based only on a known style sheet referenced in the TYPE attribute or the widely accepted default of text/css. This is the key difference between a style sheet defined with the <STYLE> tag and one assigned using the <LINK> tag. A style sheet specified in the <STYLE> tag is a reference to a standard style sheet known to the browser, and any style changes are assigned between the open and close STYLE tags. A style sheet specified in a link can be a reference to a style sheet anywhere on the Internet and is not included as part of the document.

You can add the <STYLE> tag to your document as follows:




<HTML>



<HEAD>



<TITLE>The Web Book</TITLE>



<STYLE NOTATION=dsssl-lite"> . . . </STYLE>



</HEAD>



<BODY>



 . . .



</BODY>



</HTML>

NOTE

Style sheets are fairly new to Web publishing but are powerful enough to warrant close attention. Currently, the only major browsers to support style sheets are Internet Explorer 3.0 and Netscape Navigator 4.0. As more browsers support style sheets, you will see dramatic changes in the way information is published on the Web. One way to keep pace with changes in Web publishing that may be associated with style sheets is to add the following address to your browser's hot list:




Style Sheets Basics


Before getting into the really fun stuff, let's examine some style sheet basics, such as:


Grouping Styles


Every textual or graphical element in your Web page can have a unique look. Following what I've outlined so far for style sheets, you would apply one style parameter to each element. For example, to set the color of all headings to brown, you might use the following:




<STYLE>



H1  {color: brown}



H2  {color: brown}



H3  {color: brown}



H4  {color: brown}



H5  {color: brown}



H6  {color: brown}



</STYLE>

Defining each style element separately would mean some very large style sheets and would also increase the downloading time of your page. Thankfully, you can combine like definitions by grouping them in a comma separated list, such as:




<STYLE>



H1, H2, H3, H4, H5, H6  {color: brown}



P, BLOCKQUOTE  {color: blue}



</STYLE>

Cascading Style Sheets


Importing multiple style sheets into the same page comes in handy more times than you might expect, especially if you rely on external style sheet definitions. Resolving conflicts that might occur is where the cascading effect of the style sheet specification proves a tremendous blessing. When style sheets cascade, they follow a specific precedence order for style definitions.

The precedence order is based on three key factors, which are listed in lowest to highest precedence order:

When resolving a style conflict and determining which style to display when, the first factor examined by a client is the weight of the definition. By default, all definitions have a weight of normal. You can change the weight of a definition by declaring it as important, such as:




<STYLE>



H1, H2, H3, H4, H5, H6  {color: brown ! important}



P, BLOCKQUOTE  {color: blue ! important}



</STYLE>

The second factor examined by a client is the origin of the definition. The current specification allows both Web publishers and Web users to create style sheets. A publisher's definitions have higher precedence than a user's definitions.

The final factor examined by a client is the specificity of the definition. A definition that applies to a general element on the page, such as a page division, has a lower precedence than a specific element, such as a listed item in an unordered list. Similarly, a definition imported from an external style sheet has a lower precedence than a definition defined in-line.

Don't try to memorize the precedence order. Knowing that a precedence order exists is usually sufficient for most Web publishers and can explain why a section of the page doesn't display exactly as you want it to. If you understand that there is a precedence order, you can fix a troublesome element simply by giving an in-line style definition to the page element you want to correct.

Class Types


Using class types, you can create sets of style rules. You can then apply the style rules to elements in your pages by referencing the class type.

Defining a class type is easy; all you have to do is append a class label to your style definition. You separate the style definition and the class label with a period, such as




<STYLE>



H1.styleA  {font: 45pt Times; color: brown}



H1.styleB  {font: 30pt Arial; color: blue}



</STYLE>

To apply the style definition in your page, you must reference the class type. Examine Listing 16.5 to see how you can reference class types.

Listing 16.5. Using class types.




<HTML>



<HEAD>



<TITLE>Using Classes in Style Sheets</TITLE>



<STYLE>



H1.styleA  {font: 45pt Times; color: brown}



H1.styleB  {font: 30pt Arial; color: blue}



</STYLE>



</HEAD>



<BODY>



<H1 CLASS="styleA"> This heading is in styleA</H1>



<P> . . . </P>



<H1 CLASS="styleB"> This heading is in styleB</H1>



<P> . . . </P>



</HTML>

Spanning Document Sections


An extremely useful markup tag introduced by style sheets is the <SPAN> tag. Using this tag, you can apply style definitions to entire sections of your page.

You can specify the style for the spanned section in the document header:




SPAN { font: Arial; color: white}

Then in the body of the document you simply insert the begin and end <SPAN> tag wherever you want to apply your style definition:




<SPAN>



<H1> A heading using the SPAN style definitions.</H1>



<P> A paragraph using the SPAN style definitions.</P>



<P> A paragraph using the SPAN style definitions.</P>



</SPAN>

You can specify style definitions for spanned sections directly in the text as well:




<SPAN STYLE="font: Arial; color: white">



<H1> A heading using the SPAN style definitions.</H1>



<P> A paragraph using the SPAN style definitions.</P>



<P> A paragraph using the SPAN style definitions.</P>



</SPAN>

Decorating Your Text with Fancy Styles


The font you use defines the way text looks. When publications were typeset for a printing press, the number of fonts publishers used were limited. Each new font included in the publication cost the publisher money. Some companies specializing in creating fonts charged thousands of dollars for a single font and, consequently, even in the early days of computing, fonts were still expensive.

Thankfully, this is not true today. The power of type was unleashed in the early days of the desktop publishing revolution. Now you can buy fonts for pennies, and there are thousands to choose from.

Using Font Styles


Beyond the uppercase and lowercase characters that make up fonts, fonts have many different characteristics. You can use normal type, bold type, italic type and bold italic type. These different font types add emphasis and carry meanings. Italic can convey a sense of nostalgia. Bold type seems to be shouting at you.

Style sheets give you precise control over font characteristics with three properties: font-weight, font-style, and text-transform. Using the font-weight property, you control the boldness of text on the page, which can make text lighter or darker. Using the font-style property, you control the style of the font as normal, italic, or small-caps. Using the text-transform property, you specify whether text is in uppercase, lowercase, or title case.

The font-weight for normal text is medium. You can adjust the boldness of the text with these relative values:

Or these absolute values:

The default font-style of text on the page is normal. You can change the style of the font to normal, italic, or small-caps as follows:

To change the case of text, you can use the text-transform property with these values:


NOTE

As more browsers support style sheets, you will be able to use font styles to create a unique look for your pages. Unfortunately, current browsers, including Internet Explorer 3.0, support a minimal set of font styles.


Examine Listing 16.6 to see how you can add font styles to your pages.

Listing 16.6. Using font styles.




<HTML>



<HEAD>



<TITLE>Using Font Styles</TITLE>



</HEAD>



<BODY>



<P>The font-weight for normal text is medium. You can adjust the



 boldness of the text with these relative values:</P>



<DL>



<DT>lighter



<DD STYLE="font-weight: lighter">Displays text in one step lighter



 than other text in the same element.</DD>



<DD STYLE="font-weight: lighter">font-weight: lighter</DD>



<DT>bolder



<DD STYLE="font-weight: bolder">Displays text in one step darker than



 other text in the same element.</DD>



<DD STYLE="font-weight: bolder">font-weight: bolder</DD>



</DL>



<UL>



<LI STYLE="font-weight: extra-light">font-weight: extra-light</LI>



<LI STYLE="font-weight: light">font-weight: light</LI>



<LI STYLE="font-weight: demi-light">font-weight: demi-light</LI>



<LI STYLE="font-weight: medium">font-weight: medium</LI>



<LI STYLE="font-weight: demi-bold">font-weight: demi-bold</LI>



<LI STYLE="font-weight: bold">font-weight: bold</LI>



<LI STYLE="font-weight: extra-bold">font-weight: extra-bold</LI>



</UL>



<P>The default font-style of text on the page is normal. You can change



 the style of the font to normal, italic or small-caps as follows:</P>



<UL>



<LI STYLE="font-style: normal">font-style: normal</LI>



<LI STYLE="font-style: italic">font-style: italic</LI>



<LI STYLE="font-style: small-caps">font-style: small-caps</LI>



</UL>



<P>To change the case of text, you can use the text-transform property



 with these values:</P>



<DL>



<DT>capitalize



<DD STYLE="text-transform: capitalize"> Display the first character



 of each word in uppercase.</DD>



<DD STYLE="text-transform: capitalize">text-transform: capitalize</DD>



<DT>uppercase



<DD STYLE="text-transform: uppercase">Display the all characters in



 uppercase.</DD>



<DD STYLE="text-transform: uppercase">text-transform: uppercase</DD>



<DT>lowercase



<DD STYLE="text-transform: lowercase">Display the all characters



 in lowercase.</DD>



<DD STYLE="text-transform: lowercase">text-transform: lowercase</DD>



<DT>none



<DD STYLE="text-transform: none">Displays all characters in default



 style and eliminates an inherited style.</DD>



<DD STYLE="text-transform: none">text-transform: none</DD>



</DL>



</BODY>



</HTML>

Using Font Sizes


Fonts come in many sizes. The larger the type size, the larger the type. Font size is specified in units called points. A point is a printing unit that equals approximately 1/72 inch. However, the true size of the point really depends on how the font was designed. Words in 10-point type using one font may not be the same as words in 10-point type in another font. This ambiguity in font sizes is something computers and desktop publishing have brought to the art of printing.

The most common point size for material designed to be read on a computer is 12-point. This is a good size for the main textual portions of the publication. Other common sizes range from 9 to 12 for the main text. Two rules of thumb for font size are:

To set font size in your style sheets, you can use the font-size property. The two-letter abbreviation for a font point is pt and is used as follows:




font-size: 12pt




font-size: 40pt

Figure 16.3 shows a page that uses font size. To see how font sizes were changed within the document, examine Listing 16.7.

Listing 16.7. Using font sizes.




<HTML>



<HEAD>



<TITLE>Using Font Sizes</TITLE>



</HEAD>



<BODY BGCOLOR="#FFFFFF">



<P Style="font-size: 12pt">Fonts come in many sizes. The larger the type size,



 the larger the type. The most common point size for material designed to



 be read on a computer is 12-point. This is a good size for the main textual



 portions of the publication. Other common sizes range from 9 to 12 for the



 main text.</P>



<P Style="font-size: 12pt">Two rules of thumb for font size are:</P>



<UL>



<LI Style="font-size: 6pt">Do not make the type size so small the reader



 has to squint to read.</LI>



<LI Style="font-size: 40pt">Do not make type size so large that the reader



 feels they have to sit across the room from the screen either.</LI>



</UL>



</BODY>



</HTML>

Figure 16.3. Changing font size with style sheets.

Using Font Faces


Fonts come in thousands of styles given names by their designers. Many font styles in use today are hundreds of years old. Fonts like Baskerville have been around since 1766. Some types that are considered modern first appeared over 200 years ago. Others, like Castellar, Contemporary Brush, and BriemScript have only been around for a few decades.

The name of a font sometimes conveys a message about the style of the font, but not always. Fonts like Ransom, Futura, Century Gothic, and NuptialScript carry distinct messages about the style. Fonts such as New Century School Book, Contemporary Brush, Courier New, and Times New Roman all seem to be saying they are modern. Thousands of other font faces simply have a name that may or may not convey a meaning to you.


TIP

The font you choose for the main text does not have to be the font you use in headings. Some fonts were meant to be used in headings. Some fonts were designed to be decorative. Other fonts were designed to be used in normal text. The key to selecting a good font style is to use a font that is easy to read under a variety of conditions and works well for the purpose for which you plan to use it.

A key concept in using fonts in your publications is to limit the number of font styles you use on any one page. For the sake of consistency, you should also limit the number of fonts you use throughout the publication. A good rule of thumb is to use no more than three different fonts styles on any page and, if possible and practical, to use the same fonts throughout the publication.


To specify the font face, you use the font-family property (see Figure 16.4). Font families are specified by a precise name, such as New Century Schoolbook, or in terms of a general font style, such as serif. If the font type is not available on the user's system, the default font as set in the user's browser is used to display your text. When you specify a font face, you must use the full name as follows:




font-family: Helvetica

If the font name is more than one word, enclose the font name in quotations, such as:




font-family: "New Century Schoolbook"

To increase the functionality of this property, you can specify more than one font face. Here, the browser will attempt to use each font face in turn until it finds one that can be used to display your text. If none of the specified font faces is available, the default font is used. You can specify multiple font types as follows:




font-family: "Arial Narrow", "Lucida Handwriting", "Times New Roman"

Creating Text Appeal

The fonts you use define the way text looks in your documents. Fonts have many different characteristics and are classified in three key ways: by family, proportionally as monospace or proportional, and stylistically as Serif or Sans Serif.

Normal, bold, and italic type form a basic font family. A font family is simply a group of related fonts. Some font families include variations such as normal type, bold type, italic type and bold italic type. These different font types add emphasis and carry meanings. Italics can convey a sense of nostalgia. Bold type seems to be shouting at you.

Most typewriters use monospace type. In monospace type, each alphabetic or numeric character takes up the same space. A monospaced l takes as much space as a monospaced w. Monospace Type is easy to read and great for tired eyes. Another kind of type is proportional type. With proportional type, each alphabetic or numeric character takes up only the space it needs. Today, most fonts are proportional. Using proportional type, you can add visual variety to your text.

Serifs are the stylistic flourishes, like cross strokes or curves, added to the end of the strokes in a character. Sans is a French word that means without. Thus, Sans Serif fonts do not have stylistic flourishes. For a classical or traditional look, you should use Serif fonts. Serif fonts are the primary fonts used in books, magazines, and newspapers because they are easier to read. Sans Serif fonts have a more contemporary look and are often used for book or magazine titles, captions, and headings. You may want to use a Sans Serif font for headings and a Serif font for normal text.


Unfortunately, font faces are not universal across platforms. If you want to ensure your text has a certain style, you should use a general font style. Here are some examples of general font styles with examples of a font that may be used by the user's system:

Examine Listing 16.8 to see how font families can be used in your pages. As you will see, the example uses class types and spanning to apply styles to sections of the page.

Listing 16.8. Using font families.




<HTML>



<HEAD>



<TITLE>Using Font Families</TITLE>



<STYLE>



.serif { font-size: 14pt; font-family:serif }



.sans { font-size: 14pt; font-family: sans-serif }



.cursive { font-size: 14pt; font-family: cursive }



.fantasy { font-size: 14pt; font-family: fantasy }



.monospace { font-size: 14pt; font-family: monospace }



</STYLE>



</HEAD>



<BODY BGCOLOR="#FFFFFF">



<DL>



<SPAN CLASS=serif>



<DD>serif</DD>



<DT>A generic font family with stylish flourishes, such as Times Roman.</DT>



<DT>font-family: serif</DT>



</SPAN>



<BR>



<BR>



<SPAN CLASS=sans>



<DD>sans-serif</DD>



<DT>A generic font family without stylish flourishes, such as Helvetica.</DT>



</SPAN>



<BR>



<BR>



<SPAN CLASS=cursive>



<DD>cursive</DD>



<DT>A font that looks hand written, such as Lucida Handwriting.</DT>



</SPAN>



<BR>



<BR>



<SPAN CLASS=fantasy>



<DD>fantasy</DD>



<DT>A modern font family, such as Western.</DT>



</SPAN>



<BR>



<BR>



<SPAN CLASS=monospace>



<DD>monospace</DD>



<DT>A non-proportional font family, such as Courier.</DT>



</SPAN>



</DL>



</BODY>



</HTML>

Figure 16.4. Using font families in your pages.

Adjusting Space Between Text Elements


With style sheets, you can give clear separation to text elements, such as paragraphs and headings, by adjusting the space between the elements. The property you use to adjust element spacing is the line-height property, which is set in units of measurement or as a percentage relative to the original spacing.


NOTE

Keep in mind that normal line spacing is a factor of font-size and element type. A level-one heading has more line spacing after it than a paragraph. Paragraphs with 14-point text have more line spacing than paragraphs with 10-point text.


Here is how you set the element spacing using font points:




line-height: 14pt

To set the element relative to the original spacing, you specify a percentage to increase or decrease the spacing. You can double the element spacing using the following:




line-height: 200%

Grouping Font Properties


Entering each font property into your style sheet separately is tedious. Fortunately, you can combine any and all font-related properties.

When you combine font related-properties, you can change the following style definition:




H1 { font-weight: bold;



    font-size: 12pt;



    line-height: 14pt;



    font-family: courier;



    font-style: small-caps}

To this:




H1 { font: bold 12pt/14pt courier small-caps}

NOTE

The order of the property values is not important. You can group the property values any way you like.


Figure 16.5 shows a combined example using many of the font properties discussed in this section. The style definitions and outline of the page is available in Listing 16.9.

Listing 16.9. Combining font properties.




<HTML>



<HEAD>



<TITLE>Creating Text Appeal</TITLE>



<STYLE>



H1 { font-weight: bold;



       font-size: 35pt;



       font-family: Harrington;}



P { font: bold 12pt/14pt "Lucida Handwriting"}



</STYLE>



</HEAD>



<BODY BGCOLOR=#FFFFFF>



<H1 ALIGN=CENTER>Creating Text Appeal</H1>



 . . .



</BODY>



</HTML>

Figure 16.5. Creating Text Appeal by using multiple font properties.

Showing Your True Colors with Styles


You can easily add splashes of vivid color to your pages by using style sheets. Color can be added to text, backgrounds, and images used in your pages.

Using Colorful Backgrounds and Text


The two properties you will use to add color to your pages are the color property and the background property. The color property is used to set the color of text, and the background property sets the background color the text is displayed against.


TIP

With the wide range of colors available, there are bound to be problems. This is especially true when you use color combinations with text and backgrounds. For example, lightly colored text against a white background is almost always a poor combination.

Increasingly, Web pages are printed for future reference or to allow the user to read the page in their free time. For this reason, you may want to consider the readability of your page when printed. Many color combinations work on the Web but don't print well.


In the following example, black text would be displayed against a yellow background:




<P STYLE="color: black; background: yellow">



Black text against a yellow background</P>

Both properties can be expressed as a color name or a hexadecimal value:




color: black



color: #000000

However, using a predefined color name is the easiest option. You simply select a color name from the list of 16 widely known color names. The currently defined color names are shown in Table 16.1.

Table 16.1. The 16 Widely known color names.

Aqua Gray Navy Silver
Black Green Olive Teal
Blue Lime Purple White
Fuchsia Maroon Red Yellow

An example page using the color and background properties is shown in Figure 16.6. The markup for the page is shown in Listing 16.10.

Listing 16.10. Combining colors.




<HTML>



<HEAD>



<TITLE>Combining Colors</TITLE>



<STYLE>



H1  {font: 25pt Arial; color: white; background: blue}



P  {font: 12pt/12pt Times;



    color: blue;



    text-indent: .5in;



    margin-left: .5in;



    margin-right: 1in}



UL LI {font: 10pt Times;



    color: black;



    background: yellow;



    margin-left: 1.5in;



    margin-right: 1.5in}



</STYLE>



</HEAD>



<BODY BGCOLOR=#000000>



<H1 ALIGN=CENTER>Using Color <BR> in Your Pages</H1>



<P>The use of color in publications has always caused problems.



 In the early days of desktop publishing, people were discovering



 color printers. Documents were printed in red, yellow, blue,



 purple and combinations of any other colors you can think of.



 This was not done because it was a sound design technique,



 rather because the desktop publisher could.</P>



<P>With the wide range of colors available, there are bound to be problems.



 This is especially true when you use color combinations with text and



 backgrounds. For example, lightly colored text against a white background



 is almost always a poor combination.</P>



<P>The best rules to follow when using colorful text or backgrounds are</P>



<UL>



<LI>Use basic colors for text, like black, gray, red, yellow,



 green, blue, and white.



<LI>Use basic colors for backgrounds but contrast them with the



 text colors. For example, if you use a dark blue background,



 try using white, bright yellow, or black text.



<LI>Do not use too many different color combinations with text



 and backgrounds on the same page.



</UL>



</HTML>

Figure 16.6. Using color in text and backgrounds.


NOTE

Although it is difficult to read the colorful text used in this example, the page works well on the Web. This is a good example of contrast problems that may occur when printing Web pages. If you were concerned about readability in print, you would need to select different colors.



Using Images in Backgrounds


In addition to using colors with backgrounds, you can also specify an image to display in the background. Although in theory you can add a background image to any text element, current browsers only allow you to add the image to the body of the page. Here is how you can add a background image to a page:




BODY  { background: url(Globe1.gif)}

NOTE

The URL parameter for the background property can be a relative URL or an absolute URL.


By default, the background image is tiled to fill the window and is overlaid on top of any specified color. This allows you to combine a background color and a floating object. To avoid a conflict, assign the background image in the style sheet and the background color in the <BODY> tag as follows:




<HTML>



<HEAD>



<TITLE>Combining Colors</TITLE>



<STYLE>



BODY  { background: url(Globe1.gif)}



</STYLE>



</HEAD>



<BODY BGCOLOR=#000000>



 . . .



</HTML>

As you might expect, the style sheet specification allows you to precisely define how and where the background image will be displayed. To control the tiling of the image, the specification introduces the repeat attribute. There are four valid settings:

With the scroll attribute, you can specify that the image scrolls in the background, which is the current default for background images. To make the image fixed on the page, simply use the fixed keyword:




BODY  { background: url(Globe1.gif) fixed}

The most powerful feature offered for background images is precise positioning using a grid coordinate system or keywords. The coordinate system style sheets may be slightly different from what you may be used to. The upper-left corner of the current element is at coordinate 0% 0%, which is the default position. As you move outward to the right in a straight line, the x coordinates grow larger. As you move downward in a straight line, the y coordinates grow larger.

To start tiling the background image in the middle of the page, you could use the following style sheet definition:




BODY  { background: url(Globe1.gif) 0% 50%}

Or




BODY  { background: url(Globe1.gif) left middle}

The keywords left and middle correspond to preset locations in the grid system. There are six valid settings:

Figure 16.7 combines some of the properties for background images. The image is tiled along the y axis using the value repeat-y and placed precisely on the page using a y axis value of 25%. To ensure the paragraph text is not displayed on top of the image, the left margin is indented. Listing 16.11 shows the style definitions for the example:

Listing 16.11. Placing background images on the page.




<HTML>



<HEAD>



<TITLE>Placing Background Images on the Page</TITLE>



<STYLE>



H1 {font: 25pt Arial; background: blue}



P { font: 12pt/8pt Times;



    color: blue;



    text-indent: .5in;



    margin-left: 1.5in;



    margin-right: 1in }



BODY { background: url(Globe.gif) repeat-y 0% 25%}



</STYLE>



</HEAD>



<BODY BGCOLOR="#FFFFFF">



 . . .



</BODY>



</HTML>

Figure 16.7. Precisely placing background images on the page.

Cool Spacing Techniques with Style Sheets


In many of the earlier examples, I used spacing techniques to add flair to the page. This section shows how you can use the same spacing techniques in your pages to control the margins size, line spacing, word and letter spacing, and more.

Getting the Most out of Margins


Sometimes it isn't what you have on-screen that conveys your message, but what you don't have on-screen. Empty space on the screen makes the material easier to read by drawing the reader's attention to the area of the screen that does contain material. The separation of material creates emphasis and compels the reader to pay attention to the central text or images.

Using space effectively is not a new idea. In traditional publications, graphic designers carefully balance the amount of empty space on the page in order to emphasize material. They do this by using wide margins whenever possible. Open your favorite text book and you will probably find that the top margin is smaller than the bottom margin. Next compare the margins on two opposing pages. You may find that on the left-hand page the left margin is wide and the right margin near the binding is narrow. On the right-hand page the left margin near the binding is narrow and the right margin is wide. Print publications are usually designed this way to make them more visually appealing.

Some of the ways you can use screen space to enhance your Web pages include:

You can vary these techniques to fit the needs of your publication. If you want off-center text to the left, do so—or use a wide right margin and a narrow left margin.

A page that is entirely graphical can also benefit from spacing techniques. If text is secondary to an image on the page, the center piece of the page should be the image. Then, you can design the page to enhance the value of the image. The key is to use space in a way that enhances the design and draws attention to what you want to emphasize.

These and many more spacing techniques can be achieved with style sheets. To adjust the width of the margins, you will use these properties:

You can specify the size of the margin in a specific unit of measurement using a two-letter abbreviation, such as in for inches. Other units of measurement you may want to use include:


What is an En Space?

An en is a unit used by typesetters and is equal to half the point size of the associated text. If the reader is displaying your page in a 12-point font size, an en unit for the page would be roughly 6 points. Keep in mind that one point is roughly equal to 1/72 inch, although this measurement can vary depending on the actual font used. This means that 6 points is approximately 1/12 inch. Therefore, for every whole digit increment in en units, the tab position for this reader will move 1/12 inch. Sound like rocket science? Well, maybe it is. However, the developers of HTML 3 and the style sheets specification needed a generic unit that could be sized relative to the current font and the en filled this need quite well.

You can create powerful spacing effects by changing the margins within the body of your page. One way to do this is to alternate margin widths (see Figure 16.8). Listing 16.12 shows the HTML for the example.

Listing 16.12. Using margins.




<HTML>



<HEAD>



<TITLE>Cool Spacing Techniques With Margins</TITLE>



<STYLE>



BODY { background: white;}



H1 {font: 25pt Helvetica;



        background: yellow;}



P.first { font: 10pt Arial;



    color: blue;



    margin-left: .25in;



    margin-right: 2.5in;}



P.second { font: 10pt Arial;



    color: blue;



    margin-left: 2.5in;



    margin-right: .25in;}



</STYLE>



</HEAD>



<BODY>



<H1 ALIGN=CENTER>Using Spacing Techniques</H1>



<P CLASS=first>Sometimes it is not what you have on the screen that helps



 convey your message, rather what you do not have on the screen. Empty



 space on the screen makes the material easier to read by drawing the



 readers attention to the area of the screen that has material on it.



 It is the separation of the material that creates emphasis and draws



 the reader's attention.</P>



<P CLASS=second>Using space effectively is not a new idea. In traditional



 publications graphic designers carefully balance the amount of empty space



 on the page to emphasize material. They do this by using wide margins



 whenever possible. Open your favorite text book and you will probably



 find that the top margin is smaller than the bottom margin. Next compare



 the margins on two opposing pages. You may find that on the left-hand



 page the left margin is wide and the right margin near the binding is



 narrow. On the right-hand page the left margin near the binding is narrow



 and the right margin is wide. Print publications are usually designed this



 way to make them more visually appealing.</P>



<P CLASS=first>A page that is entirely graphical can also benefit from spacing



 techniques. If text is secondary to an image on the page, the center piece



 of the page should be the image. Then, you would design the page to enhance



 the value of the image. The key is to use space in a way that enhances the



 design and draws attention to what you want to emphasize.</P>



</BODY>



</HTML>

Figure 16.8. Cool spacing techniques using margins.


How Graphic Designers Use Grids

By adjusting margins for text and graphical elements, you can create grids. The grid system is a way of designing pages that can help you create a uniform and symmetrical look to the published page. Graphic designers have used the grid system to design pages for many years. Using the grid system, you break the page into columns. Text, graphics and other objects on the page are lined up within the columns.

A simple page could be broken into three grid columns. Complex pages could be divided into 10 or more grid columns. The number of imaginary grid columns depends on the type and number of objects you are placing on the page.

For example, a newsletter could be divided into three grid columns. Header and title information could go across the whole top of the page, meaning this text would be in all three grids. Pictures could be aligned in the first or leftmost grid. Text could be placed in columns two and three.

Although the grid system is used primarily in print publications, it also makes sense to use the grid system in electronic publications. Your publication should not look like an angry mess on the reader's computer screen. The pages of your publication should be pleasing to look at. Using the grid system helps you add symmetry to your pages.


Just as you can group style sheet elements, you can group related element properties. When you group elements related to margins, you simply specify them after the generic margin property in the following order: top margin, right margin, bottom margin, and left margin. What this means is that the following style definition:




P { margin-top: .5in;



margin-right: 1.0in;



margin-bottom: .75in;



margin-left: 1.0in }

Is equivalent to:




P { margin: .5in 1.0in .75in 1.0in }

NOTE

If you use the margin property and only set one value, the margin value applies to all margins. If you use the margin property and only specify two values, the margin values are applied to opposing sides.



Using Borders to Add Spacing


Borders provide another way to add spacing to elements on your page. Like the margin property, there is a set of related properties for borders: border-top, border-right, border-bottom, border-left, and border.

You can set the width of the border as a relative or absolute value:

You can add color to the border simply by specifying a color name or value:

To add a unique style to the border, you can use any of the following:

When you use a 3D border, you can specify an image to display in the border space. The image will be repeated throughout the border. Here is how you could create a fancy border with an image:




IMG { border: groove .5in url(coolrule.gif) }

To increase the spacing between borders and content, you can use the padding property. Like other spacing properties, there is a set of related properties for padding. Still, the best way to set padding is with the general property. Here is how you can set a border and padding for the IMG element:




IMG { border: solid .5in white; padding: .25in }

Another way to give your pages a unique look is to adjust the spacing between words and letters. You can use this to give a monospace look to a proportional font face or to create long banner-like headings. To adjust the spacing between words, you use the word-spacing property. To adjust the spacing between letters, you use the letter-spacing property.

Playing with the Text


Style sheets create entirely new ways to enhance your pages. Some of the best style sheet properties are those that let you play with the text on the page. You can indent the first line of each block level element using the text-indent property, which adds a style to your text never before seen in Web publications.

Figure 16.9 shows how you can use indented text and shading to create a powerful effect in your Web page. The markup for the example is available in Listing 16.13.

Listing 16.13. Using indentation and shading.




<HTML>



<HEAD>



<TITLE>Using Text Indentation and Shading</TITLE>



<STYLE>



H1 {font: 35pt Times;



        color: blue}



P.orig { font: 14pt Arial;



    color: brown;



    text-indent: 1.5in;



    margin-left: .25in;



    margin-right: 1.25in}



P.note { font: 15pt "Lucida Handwriting";



    background: Silver;



    color: blue;



    margin-left: 2.5in;



    margin-right: .1in}



</STYLE>



</HEAD>



<BODY BGCOLOR="white">



<H1 ALIGN=CENTER>Creating Powerful Pages <BR> with Style Sheets</H1>



<P CLASS=orig>



Style sheets create entirely new ways to enhance your pages.



 Some of the best style sheet properties are those that let you



 play with the text on the page. You can indent the first line



 of each block level element using the text-indent property, which



 adds a style to your text never before seen in Web publications.



</P>



<P CLASS=note>



Note:<BR>



You can add notes, tips, warnings and cautions to your pages



 by creating a shaded box with the style sheet.



</P>



</BODY>



</HTML>

Figure 16.9. Using indentation and shading.

Another way to play with the text on the page is with pseudo elements such as first-line and first-letter. The first-line element allows you to define unique characteristics for the first line of any block level element. Using this element, you can apply any style-sheet definition for fonts, colors, and backgrounds. When you use this element, enter it as a separate definition, as in the following:




P:first-line {font: 16pt Times; color: blue}

Another cool element is the first-character element. Like the first-line element, you can apply any style sheet definition to the first-character element. When you use this element, enter it as a separate definition, as in the following:




P:first-character {font: 30pt Arial; color: black}

Anyone who has ever wanted to add drop caps to his Web pages needs to look no further (see Figure 16.10). The first-character element makes creating stylish drop caps a snap—especially if you combine it with the float property. When you float the first character, text can flow around the contour of the letter or along the straight line box around the letter.

Here are some ways you can float the first character in a text element:




P:first-character {float: left contour}




P:first-character {float: left box}
P:first-character {float: right contour}
P:first-character {float: right box}

Figure 16.10. Creating Drop Caps with Style Sheets.

Style Sheets and the FrontPage Editor


FrontPage does not support style sheets and has problems working with pages that have style sheets. For this reason, you should not open pages with style sheets in the FrontPage Editor. However, sometimes you will need to edit in the FrontPage Editor a page that has a style sheet. This section can help you solve some of the problems you will face.

As you know, there are many ways to work with style sheets. You can use the <LINK> tag to link to an external style sheet. You can place the style elements or import statements directly in the header. Or you can add the style element as an attribute of individual markup tags. Although FrontPage doesn't have problems with the latter option, it does materially affect other uses of style sheets.

Links to external style sheets are automatically deleted when you open and save the page in the FrontPage Editor. If you want to edit your page in the FrontPage Editor, do the following:

  1. Open the page in a standard text editor or word processor.
  2. Write down the link reference or copy it to the clipboard and paste it into a new document.
  3. Edit your HTML page in the FrontPage Editor.
  4. Re-open the page in a standard text editor or word processor.
  5. Insert the link reference.
  6. Save the page.

If you load a page with an internal style sheet into the FrontPage Editor, you will see that FrontPage moves the style elements from the header to the body of the page. As long as you do not try to manipulate the style element in any way, this change does not affect the use of style sheets in the Internet Explorer 3.0 and later versions. However, this change does affect how style sheets are used in other browsers. Generally, other browsers interpret the style references as standard text and, as you know, standard text is displayed with the page. To avoid possible problems, do the following:

  1. Open the page in a standard text editor or word processor.
  2. Copy the style references, including the beginning and ending <STYLE> tags, to the clipboard and paste it into a new document.
  3. Edit your HTML page in the FrontPage Editor.
  4. Re-open the page in a standard text editor or word processor.
  5. Paste the style reference back into the header of the page.
  6. Save the page.

Summary


Style sheets enable you to customize your Web pages and control every aspect of the layout and design of your page. With style sheets, decorating your text with fancy styles has never been easier. Finally, you can use any font face, type, size or color you want. You can easily add color to text, backgrounds, and images used in your pages. You can even boost the impact of your pages with cool spacing techniques adopted from desktop publishers.

Previous Page Page Top TOC Next Page