Приглашаем посетить
Литература (lit-info.ru)

2.2 Controlling text properties with style

Table of Contents

Previous Next

2.2 Controlling text properties with style

CSS font properties provide a more logical set of tools to control the way texts are displayed on a Web page. They are more powerful than the FONT attribute introduced in HTML 3.x or earlier. Thus, unless backward compatibility is required, CSS properties are used throughout this book.

Some frequently used CSS properties related to font are listed in Table 2.1.

Table 2.1. Font family, size, weight, style, and color

CSS property

CSS values

NS

IE

Description

CSS version

Color

#rrggbb

color name

4.+

4.+

Sets the color of the font in 24-bit red, green, blue mode

CSS1

Font

font-family,

font-size,

font-style,

font-weight

4.+

4.+

A shorthand property to set all font values

CSS1

Font family

Family name

Generic family

4.+

4.+

A prioritized list of font family names

CSS1

Font size

Length fixed

% relative

4.+

4.+

Sets the size of font

CSS1

Font style

Normal

Italic

Oblique

4.+

4.+

Sets the style of the font

CSS1

Font variant

Normal

Small caps

4.+

4.+

Displays text in a small-caps font or normal font

CSS1

Font weight

Normal

Bold

Bolder

Lighter

4.+

4.+

Sets the weight of the font

CSS1


CSS Level 1 (CSS1) is implemented fully in both the NS6+ and IE6+ browsers. Some other browsers such as Opera 5+ are also CSS1 compliant. Although not fully implemented, the CSS Level 2 (CSS2) specification is available via W3C. Basically the CSS2 specification not only adds to the existing CSS1 specification, but also supersedes many of its elements in particular the additions to the font, box, and positioning elements. It is an extensive specification and takes style sheets to a new level.

2.2.1 Font family, size, weight, and color

Font family is defined by an attribute or keyword font-family inside a CSS definition. The general format is



Font-family: font_name1, font_name2, font_name3

where font_name is the name of the font available on your system. Quotation marks are used if the font_name contains spaces or more than one word (e.g., "Times New Roman").

It's worth pointing out that there are few truly universal fonts common to all operating systems and browsers. As a general rule, the browser does the best it can to match the requested fonts with the ones specified.

An inline CSS style example code is



<div style="font-family:arial, 'Times New Roman',
      'Comic Sans MS'; font-size:14pt">Hello World</div>

This statement tries to display the text "Hello World" with the specified font called "arial." If "arial" is not available on your system, then the font "Times New Roman" is used as a second choice.

An internal CSS style example code is



<style>
 h1 {font-family:Georgia, "Times New Roman", Garamond, Times, Serif }
 p {font-family: Verdana, Arial, Helvetica, Sans-serif }
 .txtSt {font-family:arial, "Times New Roman" }
</style>

In this example code, a new set of default font families for the level 1 heading h1, paragraph p, and the class txtSt are defined.

Font size is defined by the attribute font-size inside a CSS definition. The general format is



font-size: size

where size is a scale setting the size of the display font on the browser window. You can define sizes in basically two ways: length and percentage. Length is a fixed scale and can be specified in points (pt), pixels (px), millimeters (mm), centimeters (cm), and inches (in). The percentage size (%) represents relative font scale. As an example, the following code



<div style="font-size:20pt">A fixed 20pt text string</div>
<div style="font-size:150%">A relative text string (150%)</div>

displays the strings "A fixed 20pt text string" in 20-point font size and "A relative text string (150%)" in 150% relative to the existing font size respectively.

To use font-family and font-size together, all you have to do is to put them into a style definition separated by a semi-colon. The example code



<div style="font-family:arial,times;font-size:20pt">
     Hello World</div>

displays the text "Hello World" in 20-point "arial." All CSS style properties and values can be defined this way. You can specify as many attributes as you want, with each separated by a semi-colon.

Example Ex02-06.htm is a page illustrating various font families, sizes (both fixed and relative), and colors. Both the internal and inline CSS styles are used as you can see in the example.



Example: ex02-06.htm - Font Family, Size And Weight

 1: <?xml version="1.0" encoding="UTF-8"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head>
 6:    <title> Font Family, Size and Weight  ex02-06.htm</title>
 7:    <style type="text/css">
 8:   h1 {font-family:'Comic Sans MS',times, font-size:20pt;color:#000088}
 9:   h2 {font-family:arial,times;font-size:200%; color:#880000 }
10:   h3 {font-size:150%;color:008800}
11:   .small {font-family:times;font-size:80%}
12:   .half {font-family:times;font-size:50%}
13:   .normal {font-family:arial,times,serif; font-size:90%}
14:    </style>
15: </head>
16:
17:    <div style="font-family:arial;font-size:20pt;font-weight:bold;
18:   text-align:center">
19:   Font family and Sizes Demo <br />(Fixed and Relative Sizes)</div>
20:
21:    <h1>A fixed text string with</br />
22:   font-family:"Comic Sans MS";font-size:20pt</h1>
23:    <h2>A relative sized text with font-family:arial;font-size:200%<br />
24:   <span class="half">and half of this size is 100%</span></h2>
25:    <h3>A text with default font and font-size:150%</h3>
26:  <span class="normal">A slightly smaller paragraph (size:90%)</span><br />
27:
28: </body>
29: </html>

Lines 714 define an internal CSS style with new CSS properties for the elements h1, h2, h3 and the classes small, half, and normal. For example, the h1 element is set to use the "Comic Sans MS" as the default font typeface, and the fixed display size of 20 points in a color with a value of #000088. Notice that "Times" is also used as a backup font in case the specified font doesn't exist on your system. "Times" is the standard default typeface for a Windows machine. Similarly the classes small, half, and normal have their own default font settings and relative display sizes. Thus the text in lines 2122 will be displayed according to the <h1> style specified in line 8.

The division element <div> in line 17 has an inline style specifying the text to be displayed with 20-point bold Arial. A screen shot of this page is shown in Fig. 2.6.

Figure 2.6. ex02-06.htm

graphics/02fig06.jpg


Since every system may have a different set of fonts, special care should be taken when you design your Web site. There are hundreds of fonts available. As a general rule, do not try to use a lot of fonts on a page and always include a "safe" font as an option.

A complete listing of available fonts can usually be found in the font directory in your system. For a PC and a Microsoft system, the font directory is located in /windows/fonts/. Alternatively you can also obtain a full listing of all available fonts by activating the Start|Control Panel|Font icon.

Fonts can be added to, or removed from, your machine in the usual way specified by your system.

Figure 2.7 shows a screen shot of the font directory on a Windows XP system.

Figure 2.7. Fonts available on a PC

graphics/02fig07.jpg


2.2.2 Alignment, indent, and margins

In addition to font properties, text formatting elements and margins can also be controlled using the CSS elements, Using these elements, you can specify such things as spacing between words, indentation, alignment, positions of text, and much more. Table 2.2 lists some frequently used CSS properties on margins and text alignments.

Table 2.2. Margins and alignments

CSS property

CSS values

NS

IE

Description

CSS version

margin

margin-top

margin-right

margin-left

margin-bottom

4.+

4.+

A shorthand property to set the margin properties in one definition

CSS1

margin-bottom

auto

length

%

4.+

4.+

Sets the bottom margin of an element

CSS1

margin-left

auto

length

%

4.+

4.+

Sets the left margin of an element

CSS1

margin-right

auto

length

%

4.+

4.+

Sets the right margin of an element

CSS1

margin-top

auto

length

%

4.+

4.+

Sets the top margin of an element

CSS1

margin-align

left

right

center

justify

4.+

4.+

Aligns the text in an element

CSS1

margin-indent

length

%

4.+

4.+

Indents the first line of text in an element

CSS1


CSS can take a specific unit of measurement in length. It can be in points (pt), inches (in), centimeters (cm), or a percentage (%). The left and right margins together with the division element can be used to define a text box with arbitrary length on the browser window. Consider the following example ex02-07.htm:



Example: ex02-07.htm - Margins and Alignments

 1: <?xml version="1.0" encoding="UTF-8"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title>Indent Margin and Alignment  ex02-07.htm</title></head>
 6:    <style type="text/css">
 7:
 8:    .ins {font-size:14pt;font-weight:normal;text-align:left;
 9:          text-indent:1in;margin-left:5%;margin-right:50%}
10:
11:    .pts {font-size:14pt;font-weight:normal;text-align:justify;
12:          margin-left:50%;margin-right:5%}
13:
14:    .pct {font-size:14pt;font-weight:normal;text-align:left;
15:          text-indent:5%;margin-left:5%;margin-right:50%}
16:     </style>
17:
18:  <body style="font-family:arial;font-size:16pt;font-weight:bold">
19:     <div style="font-family:arial;font-size:18pt;text-align:center">
20:      Text Indent Margin and Alignment Demo</div><br />
21:
22:     <div class="ins">This is a left aligned text box defined by
23:      margin left right (5%,50%). The first line of text should be
24:     indented 1 inch from the left margin of the box.</div><br />
25:
26:     <div class="pts">This is a right aligned text box defined by
27:     margin left right (50%, 5%). All lines are justified within
28:      the text box</div><br />
29:
30:     <div class="pct">This is a left aligned text box defined by
31:     margin left right (5%, 50%). The first line of text should be
32:      indented 5% of the browser window.</div><br />
33:
34: </body>
35: </html>
36:

In this example, three classes ins, pts, and pct are defined in lines 616. For example, the class ins sets the 14pt normal text to be indented 1 inch from the left margin of the box and left aligned. The left and right margins of the box are also set to be 5% from the left edge and 50% from the right edge of the browser window respectively. Similarly for the classes pts and pct. A screen shot of this page is shown in Fig. 2.8.

Figure 2.8. ex02-07.htm

graphics/02fig08.jpg


2.2.3 Letter decoration and transformation

Letter decoration adds a decorative property (i.e., a line) to the text of the HTML element it is associated with. For example,



<div style="text-decoration:underline; color:#8b0000">
   Text decoration underlined</div>

adds a dark red line below the text "Text decoration underlined."

The text-transform CSS element is used to set the type of case used in the text. For example, the code



<div style="text-transform:lowercase">
    This text is all in lowercase</div>

sets all text in lower case. Table 2.3 gives some of the most frequently used CSS properties relating to text-decoration and text-transform elements.

Table 2.3. Letter decoration and transformation

CSS property

CSS values

NS

IE

Description

CSS version

text-decoration

none

underline

overline

line-through

blink

4.+

4.+

Adds decoration to text

CSS1

text-transform

none

capitalize

uppercase

lowercase

4.+

4.+

Controls the letters in an element

CSS1


The example program ex02-08.htm shows text-decoration and text-transform in action. The corresponding screen shot is shown in Fig. 2.9.



Example: ex02-08.htm - Letter Decoration and Transformation

 1: <?xml version="1.0" encoding="UTF-8"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title>Text Decor. and Trans.  ex02-08.htm</title></head>
 6:    <style>
 7:   .bSt {font-family:'Comic Sans MS',times;font-size:18pt;
 8:         color:#000088}
 9:    </style>
10:
11: <body style="font-family:arial;font-size:24pt;font-weight:bold">
12:
13: <div style="text-align:center;color:#880000;text-align:center">
14:   Text Decoration and <br />Transformation Demo Page</div><br />
15:
16: <div class="bSt" style="text-decoration:underline;color:#000088">
17:  A text string uses the CSS "text-decoration:underline"</div><br />
18: <div class="bSt" style="text-decoration:overline;color:#008800">
19:  A text string uses the CSS "text-decoration:overline"</div><br />
20: <div class="bSt" style="text-decoration:line-through;color:#880000">
21:  A text string uses the CSS "text-decoration:line-through"</div><br />
22:
23: <div class="bSt" style="text-transform:uppercase;color:#000088">
24:  A text string uses the CSS "text-transform:uppercase"</div><br />
25: <div class="bSt" style="text-transform:lowercase;color:#008800">
26:  A text string uses the CSS "text-transform:lowercase"</div><br />
27: <div class="bSt" style="text-transform:capitalize;color:#880000">
28:  A text string uses the CSS "text-transform:capitalize"</div><br />
29:
30: </body>
31: </html>

Figure 2.9. ex02-08.htm

graphics/02fig09.gif


In this example, only one class bSt is defined in the internal style sheet. It sets the default font family to "Comic Sans MS" and a point size of 18 and color #000088. Lines 1527 show various effects of text decoration and text transformation.

2.2.4 Text box dimensions and spacing

With CSS, you can scale the HTML elements it is associated with to fit the specified height and width dimensions. The CSS white-space element is a powerful element that controls the way that white space and carriage returns are handled within a Web page. It allows you to add plenty of visual space to enhance the clarity of your Web pages.

Some of the most frequently used CSS properties relating to line and character spacing are given in Table 2.4. They are all CSS1 elements and therefore fully supported by both the IE6+ and NS6+ browsers.

Table 2.4. Line and character spacing

CSS property

CSS values

NS

IE

Description

CSS version

height

auto

length

%

6.+

4.+

Sets the height of an element

CSS1

width

auto

length

%

4.+

4.+

Sets the width of an element

CSS1

line-height

normal

number

length

%

4.+

4.+

Sets the distance between lines

CSS1

white-space

normal

pre

nowrap

4.+

4.+

Sets how white space inside an element is handled

CSS1

letter-spacing

normal

length

6.+

4.+

Increases or decreases the space between characters

CSS1

word-spacing

normal

length

6.+

6.+

Increases or decreases the space between words

CSS1


These CSS properties provide you with yet more control over how your text should be displayed by the browser. For example, the CSS element word-spacing can be used to set the spacing distance between words on a Web page. Wide values can make your text easier to read, or achieve some visual effects. The example ex02-09.htm demonstrates some of these CSS properties.



Example: ex02-09.htm - Line-height, Letter and Word Spacing

 1: <?xml version="1.0" encoding="UTF-8"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title>Line-height and Spacing  ex02-09.htm</title></head>
 6: <style>
 7:    div {font-size:14pt;color:#000088; padding:2ex;margin-left:1in;
 8:    font-weight:normal; width:6in }
 9:
10:    .line01 {line-height:150%; letter-spacing:0.2em}
11:    .line02 {line-height:200%; word-spacing:1.5em}
12:  </style>
13:
14: <body>
15:
16: <div style="font-family:arial; font-size:20pt; font-weight:bold;
17:    color:#880000">CSS Line-height, Letter and Word Spacing Demo </div>
18:
19: <div>This paragraph should be leading of 100%
20: i.e., the default leading produced by the CSS line-height property.</div>
21:
22: <div class="line01">This paragraph should be leading of 150%
23: produced by the CSS line-height property. The letter-spacing
24: feature is supported in IE4 but not NS4. You should have no problem
25: if you are using NS6+</div>
26:
27: <div class="line02">This should be leading of 200% produced by the
28: CSS line-height property. Word spacing is not supported by IE4 or NS4.
29: You have no problems if you are using the latest browsers</div>
30:
31: </body>
32: </html>

Three CSS properties are defined within the internal CSS style sheet in lines 613. Line 7 has an attribute padding:2ex which is used to add padding (of 2ex units) equally to the top, bottom, and sides of the division element. This will add visual space to the text. Line 10 defines a class line01 that sets the spacing of 0.2em between characters. The distance between two lines is 150% in relation to the size of the font in use. The unit em is a measure relative to the height of the current font used. The unit ex, on the other hand, refers to the relative height of a lower case "x." Line 11 is another class line02. It sets the distance between two lines to be 200% and the spacing distance between words is 1.5em.

An interesting element is the <div> element in line 16. This line has an inline style that redefines the font-size (20pt) and font-weight (bold). The browser will use this new set of CSS properties to format the text that is assocciated with this division element. This is an example of cascading styles in practice.

A screen shot of this example is shown in Fig. 2.10.

Figure 2.10. ex02-09.htm

graphics/02fig10.gif


    Table of Contents

    Previous Next