ptg 14.4 Common Style Sheet Properties 539 14.4.3 Working with Fonts The presentation of a document would be quite boring if you only had one font face and size available. CSS lets you specify a style for the fonts in a document in a variety of ways— by family, size, color, and others (see Table 14.6). There are a huge number of fonts to pick from, although it’s a good idea to specify fonts that users are likely to have installed. Like the HTML <font> tag, CSS lets you specify several font families (see Table 14.7), and will go from left to right, selecting the one available on your computer. See Figure 14.5 to sample different font styles for your operating system. Table 14.6 Font Properties Property Value/Example Elements Affected font 12pt/14pt sans-serif, 80% sans-serif, x-large/110% arial, normal small-caps All font-family serif, sans-serif, cursive, fantasy, monospace; or any specific font family typeface name may be used All font-size 12pt, larger, 150%, 1.5em All font-style normal, italic, oblique All font-variant normal, small-caps All font-weight normal, bold, bolder, lighter, 100, 200 900 All Table 14.7 Font Families Family Names Specific Family Typeface Names Serif Sans serif Monospace Cursive Fantasy From the Library of WoweBook.Com ptg 540 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript EXAMPLE 14.4 <html> <head><title>Fonts</title> <style type="text/css"> body { background-color: darkblue; } 1 h1 { color: yellow; font-size:x-large; font-family: lucida, verdana, helvetica; } 2 h2 { color:lightgreen; font-size:large; font-family:courier; } 3 h3 { color:lightblue; font-size:medium; font-family:helvetica; } 4 p { color:white; font-size: 22pt; font-style: italic; font-family: arial; font-variant:small-caps; } </style> </head> <body> <font size="+2"> <h1>My name is Papa Bear</h1> 5 <h2>My name is Mama Bear</h2> <h3>and I'm the Baby Bear</h3> <p>Once upon a time, yaddy yaddy yadda </p> </body> </html> EXPLANATION 1 The h1 element will have yellow text and an extra-large font size from the Lucida family of fonts. If that font is not available in this browser, Verdana will be used, and if not Verdana, then Helvetica. 2 The h2 element will have a light green, large, Courier font. 3 The h3 element will have a light blue, medium, Helvetica font. 4 Paragraphs will have white text, with an italic, Arial font size of 22 points, all in small caps. 5 The <h2> tag is displayed in its big style. See Figure 14.4. From the Library of WoweBook.Com ptg 14.4 Common Style Sheet Properties 541 Figure 14.4 Changing fonts. Figure 14.5 CSS font sampler and survey at www.codestyle.org. From the Library of WoweBook.Com ptg 542 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.4.4 Working with Text If you want to make a business card, how do you put extra space between each of the letters of your company name? If you’re writing a science term paper, how do you deal with exponents, equations, or subscripts? And how do you make it double-spaced? If you’re writing a cool poem and want your text in the shape of an hourglass or a circle to give it visual appeal, or you just want to emphasize certain words to make your point for a presentation, then what to do? The CSS controls listed in Table 14.8 could be your answer. Table 14.8 Text Alignment Properties Property Value/Example Elements Affected letter-spacing normal, 0.1em All line-height normal, 1.2, 1.2em, 120% All text-align left, right, center, justify All text-decoration underline, overline, line-through, blink All text-indent 3em, 15% Block-level elements text-transform capitalize, uppercase, lowercase, none All vertical-align baseline, sub, super, top, text-top, middle, bottom, text-bottom, 50% Inline elements word-spacing normal, 2em All EXAMPLE 14.5 <html> <head><title>First Style Sheet</title> <style type="text/css"> 1 #title{ 2 word-spacing: 10px; letter-spacing: 4px; text-decoration: underline; text-align: center; font-size: 22pt ; font-family:arial; font-weight: bold; } From the Library of WoweBook.Com ptg 14.4 Common Style Sheet Properties 543 3 p { line-height: 2; text-indent: 6%; font-family:arial; font-size:18; } } </style> </head> <body bgcolor="coral"> 4 <p id=title>The Color Palette</p> 5 <p>The world is a colorful place. Web browsers display millions of those colors every day to make the pages seem real and interesting. Browser colors are displayed in combinations of red, green, and blue, called RGB. This is a system of indexing colors by assigning values of 0 to 255 in each of the three colors, ranging from no saturation (0) to full saturation (255). Black has a saturation of 0 and white has a saturation of 255. In HTML documents these colors are represented as six hexadecimal values, preceded by a # sign. White is #FFFFFF and black is #000000.</p> 6 <p> Although there are millions of different combinations of color, it is best when working with Web pages to use what are called Web-safe colors.</p> </body> </html> EXPLANATION 1 #title is called an ID selector, a way in the style sheet that we can allow any selector to use a style. In this example, the title of the page is going to be distinct from the text in the rest of the page. For example, if the <p> tag is used, it can identify itself with this ID selector to produce the text style described in the declaration block (see line 4). If the ID is not used, the rest of the paragraphs will display text as defined by the rule in line 3. More discussion on ID selectors is presented in the section “The ID Selector and the ID Attribute” on page 564. 2 Text controls are defined in the rule. The text will be centered, underlined, with a 22-point, bold Arial font. The spacing between each letter and each word is de- fined in pixels. 3 When the <p> tag is used, a line height of 2 will produce double-spaced lines. The first line of each paragraph will be indented by 6% from the left margin. 4 This paragraph is identifying itself with the title ID. This means that for this para- graph, the style will follow the rule defined after line 1. 5, 6 Both of these paragraphs take on the style provided by the rule in line 3. The re- sults is shown in Figure 14.6. EXAMPLE 14.5 (CONTINUED) From the Library of WoweBook.Com ptg 544 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.4.5 Working with Backgrounds and Images The same way that wallpaper in a guest room can create a sense of warmth or calm, back- ground images can add decoration and design to an otherwise blah page. CSS gives you a number of ways to control the appearance of background images. Refer to Table 14.9. Figure 14.6 A report with a centered title, double-spaced lines, and indented paragraphs. Table 14.9 Image and Background Properties Property Value/Example Elements Affected background-attachment scroll, fixed All background-image URL (bay.gif), none All background-position right top, top center, center, bottom, 100% 100%, 0% 0%, 50% 50% Block-level and replaced elements background-repeat repeat, repeat-x (horizontally), repeat-y (vertically), no-repeat All From the Library of WoweBook.Com ptg 14.4 Common Style Sheet Properties 545 EXAMPLE 14.6 <html> <head><title>Backgrounds</title> <style type="text/css"> 1 body { background-image: url('Moonbeams.jpeg'); background-repeat: no-repeat; background-attachment: fixed background-color: #ccccff; background-position:center 80px; } 2 h2 { color:white; font-family:cursive; font-variant:small-caps; } </style> </head> 3 <body> 4 <h2 align='center'>Looking at Moonbeams</h2> </body> </html> EXPLANATION 1 CSS rules are defined for an HTML selector, the body element. The declarations define the background style of an image called Moonbeams.jpg. 2 The HTML selector is an h2 element styled to have a white, cursive, font in small caps. 3 The body of the document reflects the CSS rules laid out on line 1. 4 The h2 tag reflects the font style set by CSS. See Figure 14.7. Figure 14.7 Background image positioned and nonrepeating. From the Library of WoweBook.Com ptg 546 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript EXAMPLE 14.7 <html> <head><title>Backgrounds</title> <style type="text/css"> 1 body {background-color:"pink" ; 2 background-image: url(greenballoon.gif); 3 repeat-x }; 4 h1 {font-size: 42pt;text-indent: 25%; color:red; margin-top: 14%; font-family:fantasy;} </style> </head> 5 <body> 6 <h1>Happy Birthday!!</h1> <h1>Happy Birthday!!</h1> </body> </html> EXPLANATION 1 The rule for the body element is to give it a pink background color. 2 The background image will come from a file called greenballoon.gif, in the current directory. The URL specifies the location of the image. 3 The image will repeat itself horizontally across the screen. 4 The rule for the h1 element is a red 42-point fantasy font, indented 25% from the left of the block, where the margin is 14% from the top. 5 The body of the document reflects the style that was set for it in line 1. 6 The <h1> tag reflects the rule set for it in line 4. The result shown in Figure 14.8. Figure 14.8 Background color and a repeating image. From the Library of WoweBook.Com ptg 14.4 Common Style Sheet Properties 547 14.4.6 Working with Margins and Borders Containers. When you look at your document, it is composed of a number of con- tainers. The <body> tag is a container and it may contain a heading, a paragraph, a table, or other elements. Each of these elements also can be thought of as a container. The <div> tag is another special type of container used to define logical divisions with the content of a page. You can use the <div> tag to center a block of content or position a content block in a specific place on the page. Margins, Padding, and Borders. Each container has an outer margin, and the margin can have some padding (space between it and the next container). The padding is like the CELLPADDING attribute of a table cell. On the inside of the padding is a bor- der that separates the container from its contents. The border is normally invisible. You can change the margin, create colorful borders, or increase or decrease the padding, to give the page more style. See Figure 14.9 for a graphic representation, and Table 14.10 for a list of margin and border properties. Different browsers might handle the borders differently. Margins and borders will behave better if enclosed within <div> tags. Figure 14.9 How an element is contained. Table 14.10 Margin and Border Properties Property Value/Example Elements Affected border-bottom <border-bottom-width> or <border-style> or <color> All border-bottom-width thin, medium, thick, 2em All border-color red, green, #0C0 All border-left <border-left-width> or <border-style> or <color> All Continues content padding margin border From the Library of WoweBook.Com . Library of WoweBook.Com ptg 540 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript EXAMPLE 14.4 <html> <head><title>Fonts</title> <style type="text/css">. Library of WoweBook.Com ptg 542 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.4.4 Working with Text If you want to make a business card, how do you put extra space. of your company name? If you’re writing a science term paper, how do you deal with exponents, equations, or subscripts? And how do you make it double-spaced? If you’re writing a cool poem and