Chapter 8

Using Style Sheets

by William Robert Stanek

CONTENTS

Style sheets offer total control over every aspect of your Web page, and the Cascading Style Sheets Level 1 specification lives up to that 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 wanted their Web pages to 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 to take care of all Level 1 headings. If you also want all headings displayed in brown and paragraph text in blue, you can add this specification, too.

Adding a style sheet to your page is easier than you might think. Compare the page shown in Figure 8.1 to the page shown in Figure 8.2. Both pages have the same contents, but 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 color with your browser.

Figure 8.1 : Adding style to your pages.

Figure 8.2 : A page without a style sheet.

Note
To view pages that use style sheets, you need a style sheet-capable browser. The primary browser that supports style sheets is Internet Explorer 3.0/4.0. If you have problems viewing the style sheet examples in your browser, check that your version of Internet Explorer is current.

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

Listing 8.1 shows the complete markup for the sample page.

Listing 8.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 8.1, you can 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 just 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 could create a document called Style1 with 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 could then import the style sheet into your Web page, as shown in Listing 8.2.

Listing 8.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, such as one style sheet sets the color of paragraph text to blue and another style sheet sets the color to brown, the specification sets up clear rules to handle it-more on this later in the section titled "Cascading Style Sheets."

Another way to refer to external style sheets is with the <LINK> tag and its relationship attribute REL; this method is shown in Listing 8.3.

Listing 8.3. Referring to 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 want to add only a few style parameters to your page. No problem-the style sheet specification lets you add style elements wherever and whenever you want to in your pages by using inline style notation; an example of this is shown in Listing 8.4.

Listing 8.4. Using inline 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 inline 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 inline 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 that assigns a style sheet language. If you don't set the TYPE attribute to a specific value, this default for the Cascading Style Sheet specification is generally assumed to be the following: 


<STYLE TYPE="text/css">

If you assign a different style notation, it must be a recognized style notation in the browser's document type definition, such as dssl-lite.

Note
DSSL is the Document Style Semantics and Specification Language. This very complex style notation isn't well-suited for 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 referred to 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 isn't included as part of the document.

You could 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 associated with style sheets is to add the following address to your browser's hot list:
http://www.w3.org/hypertext/WWW/Style/

Style Sheet Basics

Before getting into the really fun stuff, take a look at some style sheet basics, such as:

Grouping Styles

Every textual or graphical element in your Web page can have a unique look. According to what you've learned 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>

Having to define each style element separately would mean using very large style sheets and increasing the download time of your page. However, you can combine similar definitions by grouping them in a comma-separated list, such as in this example: 


<STYLE>

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

P, BLOCKQUOTE  {color: blue}

</STYLE>

Cascading Style Sheets

Being able to import 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. The cascading effect of the style sheet specification is a tremendous advantage for resolving style conflicts that might happen. When style sheets cascade, they follow a specific precedence order for style definitions, which is based on three key factors, listed in lowest to highest precedence order:

When resolving a style conflict and determining which style to display when, the first factor a client examines 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: 


<STYLE>

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

P, BLOCKQUOTE  {color: blue ! important}

</STYLE>

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

The final factor examined 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 sheets has a lower precedence than a definition defined inline.

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

Class Types

Using class types, you can create sets of style rules, and then apply them to elements in your pages by referring to 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, as in the following example: 


<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 refer to the class type; examine Listing 8.5 to see how you do this.

Listing 8.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

The <SPAN> tag is a useful markup tag introduced by style sheets. Using this tag, you can apply style definitions to entire sections of your page. Here's how you 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 in the publication cost the publisher money. Some companies that specialized in creating fonts charged thousands of dollars for a single font; because of this, even in the early days of computing, fonts were still expensive.

Thankfully, this isn't 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 convey meanings. For example, italics can convey a sense of nostalgia, and 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 makes 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:

lighter: Displays text one step lighter than other text in the same element.
font-weight: lighter

bolder: Displays text one step darker than other text in the same element.
font-weight: bolder

Or you can use these absolute values: 


font-weight: extra-light

font-weight: light

font-weight: demi-light

font-weight: medium

font-weight: demi-bold

font-weight: bold

font-weight: extra-bold

The default font-style of text on the page is normal, but you can change the style of the font as follows: 


font-style: normal

font-style: italic

font-style: small-caps

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

capitalize: Displays the first character of each word in uppercase.
text-transform: capitalize

uppercase: Displays all characters in uppercase.
text-transform: uppercase

lowercase: Displays all characters in lowercase.
text-transform: lowercase

none: Displays all characters in default style and eliminates an inherited style.
text-transform: none

Note
As more browsers support style sheets, you can use font styles to create a unique look for your pages. Unfortunately, current browsers, including Internet Explorer 3.0, support only a minimal set of font styles. You'll have to wait for browsers to catch up with the standard to take full advantage of font styles.

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

Listing 8.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; here are two rules of thumb for font size:

Don't make the type size so small the reader has to squint to read.
Don't make type size so large that readers feel they have to sit across the room from the screen.

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 8.3 shows a page that uses font size. To see how font sizes were changed within the document, examine Listing 8.7.

Figure 8.3 : Changing font size with style sheets.

Listing 8.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 readers

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

</UL>

</BODY>

</HTML>

Using Font Faces

Fonts come in thousands of styles named by their designers. Many font styles in use today are hundreds of years old. Fonts like Baskerville have been around since 1766. Some types considered modern first appeared over 200 years ago, but others like Castellar, Contemporary Brush, and BriemScript have been around for only 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, and fonts like New Century Schoolbook, Contemporary Brush, Courier New, and Times New Roman all seem to be saying they are modern styles. However, 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 doesn't have to be the font you use for headings. Some fonts were meant to be used in headings, some were designed to be decorative, and others were designed to be used in normal text. The key to selecting a good font style is to use one that's easy to read in a variety of conditions and works well for the purpose you have in mind.
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 font styles on any page and, if possible and practical, use the same fonts throughout the publication.

To specify the font face, use the font-family property. 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 isn't available on the user's system, the default font 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: 


font-family: "New Century Schoolbook"

To increase this property's usefulness, you can specify more than one font face. The browser will try 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 shown in this example: 


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, which is simply a group of related fonts. Some font families include variations like normal type, bold type, italic type, and bold italic type. These different font types add emphasis and convey meanings. Italics can convey a sense of nostalgia. Bold type seems to be shouting at you.
Most typewriters use monospace type, in which each alphabetic or numeric character takes equal space-a monospaced l takes the same amount of space as a monospaced w. Monospace type is easy to read and great for tired eyes. Another kind of type is proportional type, in which each alphabetic or numeric character takes up a different amount of space. For example, a w takes up more room than an l. Most fonts today use proportional type, which adds visual variety to your text.
Serifs are the stylistic flourishes, like cross strokes or curves, added to the end of strokes in a character. Sans is a French word that means "without," so sans serif fonts don't have stylistic flourishes. For a classical or traditional look, you should use serif fonts; they are the primary fonts used in books, magazines, and newspapers because they're easier to read. Sans serif fonts have a more contemporary look and are often used for book or magazine titles, captions, and headings. You might want to use a sans serif font for headings and a serif font for normal text.

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

serif: A generic font family with stylish flourishes, such as Times Roman.
font-family: serif

sans-serif: A generic font family without stylish flourishes, such as Helvetica.
font-family: sans-serif

cursive: A font that looks handwritten, such as Lucida Handwriting.
font-family: cursive

fantasy: A modern font family, such as Western.
font-family: fantasy

monospace: A non-proportional font family, such as Courier.
font-family: monospace

Examine Listing 8.8 to see how font families can be used in your pages. As you can see, the example uses class types and spanning to apply styles to sections of the page. Figure 8.4 shows this example in a browser.

Figure 8.4 : Using font families in your pages.

Listing 8.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>

Adjusting Space Between Text Elements

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

Note
Keep in mind that normal line spacing is a factor of font-size and element type. For instance, a Level 1 heading has more line spacing after it than a paragraph does, and paragraphs with 14-point text have more line spacing than paragraphs with 10-point text do.

Here's how you set the element spacing that uses font points: 


line-height: 14pt

To set the element in relation to the original spacing, specify a percentage by which you'll increase or decrease the spacing. You can double the element spacing by using this example: 


line-height: 200%

Grouping Font Properties

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

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


H1 { font-weight: bold;

    font-size: 12pt;

    line-height: 14pt;

    font-family: courier;

    font-style: small-caps}

can be changed to 


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

Note
The order of the property values isn't important. You can group the property values any way you like.

Figure 8.5 shows an example that combines many of the font properties discussed in this section. The style definitions and outline of the page are available in Listing 8.9.

Figure 8.5 : Creating text appeal.

Listing 8.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>

Note
Keep in mind that in order to use a specific font, the font must exist on your computer. If you do not have the Lucida Handwriting font, your browser will not display the font as intended. Sometimes you can correct this shortcoming by using a generic font family, such as cursive. This way, the browser will select any available font that follows the cursive style.

Showing Your True Colors with Styles

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

Using Colorful Backgrounds and Text

The two properties you use to add color to your pages are the color property and the background property. The color property is used to set text color, 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, light-colored text against a white background is almost always a poor combination.

In the following example, black text is 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; simply select a color name from the list of 16 widely known color names. The currently defined color names are in the following list:

AquaNavy
BlackOlive
BluePurple
FuchsiaRed
GraySilver
GreenTeal
LimeWhite
MaroonYellow

A sample page using the color and background properties is shown in Figure 8.6, and the markup for the page is shown in Listing 8.10.

Figure 8.6 : Using color in text and backgrounds.

Listing 8.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>

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 allow you to add the image only to the body of the page. Here's how to add a background image: 


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 is displayed. To control the image's tiling, the specification introduces the repeat attribute, which has four valid settings:

repeat: repeat the image both horizontally and vertically in the background.
BODY { background: url(cool.gif) repeat}

repeat-x: repeat the image along the x axis (horizontally) in the background.
BODY { background: url(cool.gif) repeat-x}

repeat-y: repeat the image along the y axis (vertically) in the background.
BODY { background: url(cool.gif) repeat-y}

no-repeat: do not repeat the image in the background; display it on the window only one time.
BODY { background: url(cool.gif) no-repeat}

With the scroll attribute, you can make the image scroll in the background, which is the current default setting 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 with a grid coordinate system or keywords. The coordinate system style sheet's use may be slightly different from what you're 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 you could use this definition: 


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:

left: Start at the x position 0 percent, which is the left-hand side of the element's window.
Center: Start at the x position 50 percent, which is in the middle of the element's window.
Right: Start at the x position 100 percent, which is the right-hand side of the element's window.
Top: Start at the y position 0 percent, which is the top of the element's window.
Middle: Start at the y position 50 percent, which is the middle of the element's window.
Bottom: Start at the y position 100 percent, which is the bottom of the element's window.

Figure 8.7 combines some of the properties for background images. The image is tiled along the y axis by using the value repeat-y and placed precisely on the page with a y axis value of 25 percent. To make sure the paragraph text isn't displayed on top of the image, the left margin is indented. Listing 8.11 shows the style definitions for the example.

Figure 8.7 : Precisely placing background images on the page.

Listing 8.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>

Cool Spacing Techniques with Style Sheets

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

Getting the Most Out of Margins

Sometimes it isn't what you have on the screen that helps convey your message-it's what you don't have on the screen. Empty space on the screen makes the material easier to read by drawing the reader's attention to the screen area that has material in it. The separation of the material creates emphasis and draws the reader's attention.

Using space effectively isn't a new idea. In traditional publications, graphics designers carefully balance the amount of empty space on the page to emphasize material by using wide margins whenever possible. Open your favorite textbook and you'll probably notice that the top margin is smaller than the bottom margin. Next, compare the margins on two opposing pages. On the left-hand page, the left margin is wide and the right margin near the binding is narrow, but 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.

These are some of the ways you can use screen space to enhance your Web pages:

Don't center the text window on the screen.
Use a wide left margin and a narrow right margin.
Indent the first line of every paragraph.

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

A page that's entirely graphical can also benefit from using spacing techniques. If text is secondary to an image on the page, the centerpiece of the page should be the image, so you would design the page to enhance the image's value. 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, use these properties:

margin-left: Sets the size of the element's left margin.
P { margin-left: .5in}

margin-right: Sets the size of the element's right margin.
P { margin-right: 1.5in}

margin-top: Sets the size of the element's top margin.
P { margin-top: .5in}

margin-bottom: Sets the size of the element's bottom margin.
P { margin-bottom: .5in}

margin: Sets the size of all margins around the element.
P { margin-all: 1in}

You can specify the size of the margin in a specific unit of measurement by using a two-letter abbreviation, such as in for inches. Here are other units of measurement you can use:

px: screen pixels
P { margin-left: 50px margin-right 25px }

cm: centimeters
P { margin-left: 1cm margin-right 1cm }

mm: millimeters
P { margin-left: 50mm margin-right 25mm }

en: en units
P { margin-left: 3en margin-right 3en }

Note
An en is a unit used by typesetters that's 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 six points in size. Remember that one point is roughly equal to 1/72 of an inch, but that can vary depending on the actual font used. This means six points would equal approximately 1/12 of an inch. Therefore, for every whole digit increment in en units, the tab position for this reader moves 1/12 of an 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 in relation to the current font, and the en unit 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, like the example you see in Figure 8.8. Listing 8.12 shows the HTML for the example.

Figure 8.8 : Cool spacing techniques with margins.

Listing 8.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 it is what you do not have on the 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 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 textbook 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 centerpiece

 of the page should be the image, so 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>

How Graphics 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, symmetrical look to the published page. Graphics designers have used the grid system for many years to design pages. 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, and 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're 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, one under the other down the page, and text could be placed in columns two and three.
The grid system is used primarily in print publications, but it also makes sense to use the grid system in electronic publications. Your publication shouldn't look like a mess on the reader's computer screen; it should be pleasing to look at. Using the grid system will help 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 set only one value, the margin value applies to all margins. If you use the margin property and specify only two values, the margin values are applied to opposing sides.

Using Borders to Add Spacing

Borders offer another way to add spacing to elements on your page. Like the margin property, there's 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: 


border: thin

border: medium

border: thick

border: .25in

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


border: medium red

border: .25in #FF00FF

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

none: Do not draw a border
border: none

dotted: Draw the border as a dotted line.
border: dotted medium red

dashed: Draw the border as a dashed line.
border: dashed thin blue

solid: Draw the border as a solid line.
border: solid thick green

double: Draw the border as a double line.
border: double thin white

groove: Draw the border as a 3D line.
border: groove medium red

ridge: Draw the border as a raised 3D line.
border: ridge .5in blue

inset: Draw the border as an inset 3D line.
border: insert medium red

outset: Draw the border as an outset 3D line.
border: outset 25px white

When you use a 3D border, you can specify an image to display in the border space that will be repeated throughout the border. Here's 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, use the padding property. Like other spacing properties, there's a set of related properties for padding. Still, the best way to set padding is with the general property. Here's 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 do this to give a monospace look to a proportional font face or to create long banner-like headings. To adjust the spacing between words, use the word-spacing property; between letters, 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 by using the text-indent property, which adds visual appeal to your text.

Figure 8.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 8.13.

Figure 8.9 : Using indentation and shading.

Listing 8.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>

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


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: 


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

If you want to add drop caps to your Web pages, you don't need to look any further. (See Figure 8.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 a straight-line box around the letter.

Figure 8.10: Creating drop caps with style sheets.

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}

Summary

Style sheets allow 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 spacing techniques adopted from desktop publishers.