Table of Contents | Previous Next |
2.2 Controlling text properties with styleCSS 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.
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 colorFont 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.htmSince 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 PC2.2.2 Alignment, indent, and marginsIn 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.
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.htm2.2.3 Letter decoration and transformationLetter 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.
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.htmIn 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 spacingWith 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.
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 |
Table of Contents | Previous Next |