Chapter 8 -- Using Style Sheets
Chapter 8
Using Style Sheets
by William Robert Stanek
CONTENTS
What Are Style Sheets and How Are They Used?
Examining the <STYLE> Tag
Style Sheet Basics
Grouping Styles
Cascading Style Sheets
Class Types
Spanning Document Sections
Decorating Your Text with Fancy Styles
Using Font Styles
Using Font Sizes
Using Font Faces
Adjusting Space Between Text Elements
Grouping Font Properties
Showing Your True Colors with Styles
Using Colorful Backgrounds and Text
Using Images in Backgrounds
Cool Spacing Techniques with Style Sheets
Getting the Most Out of Margins
Using Borders to Add Spacing
Playing with the Text
Summary
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:
All Level 1 headings are in 45-point Times
Roman and displayed in brown.
All paragraphs are in 12-point Times Roman
and displayed in blue.
The first line of all paragraphs is indented
one inch.
The right margin for paragraphs is set
to one inch.
All block quotations are in 10-point Helvetica
and displayed in black.
Highlighting with a yellow background
is added to all block quotations.
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> </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> </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
Learning about cascading style sheets
Using class types
Spanning document sections
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:
The weight of the definition
The origin of the definition
The specificity of the definition
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.
Wyszukiwarka
Podobne podstrony:
ch8 (5)ch8 (13)ch8wishcraft ch8CH8 (2) NieznanyCisco2 ch8 ConceptCH8 (3)ch8 (2)ch8 (9)ch8 (10)pm ch8ch8CH8ch8 (11)ch8 (4)ch8 (4)CH8 Nieznanywięcej podobnych podstron