ptg 532 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.4 Common Style Sheet Properties In the previous examples, font-family and color are properties (also called attributes), and assigning values to them defines the style of the document. Listed in Table 14.1 are some of the properties commonly used in style sheets. Many of these properties are used in the style sheets defined throughout this chapter and later as properties of the style object used with JavaScript. The Web Design Group provides a complete listing of this information at http://www.htmlhelp.com/reference/css/properties.html. EXPLANATION 1 Three selectors, h1, h2, and h3, are grouped together. The declaration block en- closed in curly braces sets the color property to blue. Whenever any one of the h1, h2, or h3 elements is used in the document, its text will be blue. 2 The declaration block for the h1 selector consists of a group of properties and val- ues to further define the font style for this heading. 3 The font property, in this example, groups the font values as a list, rather than cre- ating individual property/value pairs as done on line 2. 4 Now the h1 tag is tested to see if the style was applied, and it is! 5 The style for the h2 tag is tested and it has been applied. 6 The only style set for the h3 tag is a blue font, and that’s all we get, as shown in Figure 14.2. Figure 14.2 Grouping selectors and declarations for h1, h2, and h3 HTML elements. From the Library of WoweBook.Com ptg 14.4 Common Style Sheet Properties 533 Table 14.1 Style Sheet Properties Property Value/Example Tags Affected Fonts 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 typeface name may be used All font-size 12pt, larger, 150%, 1.5em All font-size-adjust xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, 12pt, 25% All font-stretch normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded All font-style normal, italic, oblique All font-variant normal, small-caps All font-weight normal, bold, bolder, lighter,100, 200 900 All Colors and Background background-attachment scroll, fixed All background-color red, blue, #F00, transparent 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 color red, green, #F00, rgb(255,0,0) All Text Alignment letter-spacing normal, 0.1em All line-height normal, 1.2, 1.2em, 120% All text-decoration underline, overline, line-through, blink All text-transform capitalize, uppercase, lowercase, none All Continues From the Library of WoweBook.Com ptg 534 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript Text Alignment (Continued) text-align left, right, center, justify All text-indent 3em, 15% Block-level elements vertical-align baseline, sub, super, top, text-top, middle, bottom, text-bottom, 50% Inline elements word-spacing normal, 2em All Margins and Borders 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 border-left-width thin, medium, thick, 3em All border-right <border-right-width> or <border-style> or <color> All border-right-width thin, medium, thick, 1cm All border-style [none], dotted, dashed, solid, double, groove, ridge[inset,outset]{1,4} All border-top <border-top-width> or <border-style> or <color> All border-top-width thin, medium, thick, 3em All border-width thin, medium, thick, .5cm All clear none, left, right, both (allows or disallows floating elements on its sides) All float left, right, or none (wraps text around an element, such as an image) All height 12em, auto Block-level and replaced element margin 5em, 3em, 2em, 1em (top, right, bottom, left) All margin-bottom 100px, 50% All margin-left .5in, 40% All Table 14.1 Style Sheet Properties (continued) Property Value/Example Tags Affected From the Library of WoweBook.Com ptg 14.4 Common Style Sheet Properties 535 14.4.1 Units of Measurement You can express the size of a given property in different units of measurement; for exam- ple, a font size can be expressed in pixels or ems or points (the default is pixels). Colors can also be expressed in combinations of red, green, and blue, either by the name of the color, or its hexadecimal value. Measurement is used in three categories: absolute units, relative units, and proportional units. For example, a point size measurement (e.g., 14pt) would be the actual size (absolute) of a particular font; a value (e.g., 5em) could be relative to the size of the current font; and a color (e.g., 50%80%100%) could represent red, green, and blue as a percentage value of the original color. Relative sizes larger and smaller (relative to the parent font) can be used when defining a font. These sizes are determined by browsers or other user agents. 2 Tables 14.2 and 14.3 introduce the types of measurements that are often used in style sheets. Margins and Borders (Continued) margin-right 20em,45% All margin-top 1cm, 20% All padding 2em, 4em, 6em (right, bottom, left) All padding-bottom 2em, 20% All padding-left .25in, 20% All padding-right .5cm, 35% All padding-top 20px, 10% All width 12em, 30%, auto (initial width value) Block-level and replaced element a a. A replaced element has set or calculated dimensions, such as img, select, textarea. 2. User agents include Web browsers, search engine crawlers (spiders), cell phones, screen readers, and Braille browsers used by people with disabilities. Table 14.2 Font Size Units Absolute Font Size Unit inches (in) centimeters (cm) Continues Table 14.1 Style Sheet Properties (continued) Property Value/Example Tags Affected From the Library of WoweBook.Com ptg 536 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript Here are some examples: • font-size: 10pt • top: 20px • margin: 1em • margin-right: 20% • font-size: xx-large • font-size: 150% 14.4.2 Working with Colors What is style without color? Tables 14.4 and 14.5 give information for managing color. You can use these properties to create color for the document’s background and fonts, margins, borders, and more. The colors can be expressed with real names (e.g., red, blue, yellow, magenta) or their corresponding hexadecimal values (e.g., #FF0000, #0000Ff, #ffff00, #ff00FF). millimeters (mm) points (pt) 1/72th of an inch picas (pc) 12 points Table 14.3 User Agent Determined Font Sizes CSS Absolute Sizes HTML Font Size xx-small 1 x-small 2 small 3 medium 4 large 5 x-large 6 xx-large 7 Table 14.4 Color Properties Property Value/Example Elements Affected background-color red, blue, #F00 All color red, green, #F00, rgb(255,0,0) All Table 14.2 Font Size Units (continued) From the Library of WoweBook.Com ptg 14.4 Common Style Sheet Properties 537 Table 14.5 Common Color Names and Hexadecimal Values Color Depth. Sometimes colors don’t look as crisp and bright as you would expect; pink might look like red, or some of the colors in a field of flowers might be pale. In Chapter 10, “It’s the BOM! Browser Objects,” we discussed the screen object. It has a property called colorDepth that will tell you how many distinct colors (bits per pixel) a computer can handle. For example, a color-bit depth of 4 will display 16 colors and a color-bit depth of 24, represented as 2 to the 24th power, will provide 16.7 million col- ors. How many colors can your computer display? There are a number of color charts available on the Web that provide Web-safe color palettes. 3 See www.lynda.com, www.paletteman.com, or www.visibone.com Hexadecimal Codes. These are the codes that define colors. They are groups of three hexadecimal (base 16) numbers. The first number is red, the second green, and the third blue. Each hexadecimal number is an RGB triplet. 00 is the lowest hue, and FF is the highest. For example, red is ff0000, blue is 0000ff, green is 00ff00, and purple is 990099. For a complete list of CSS colors, their names, hex values, shades, and color mixer, go to http://www.w3schools.com/css/css_colornames.asp. These colors are sup- ported by all major browsers. 3. “Browser-Safe Palette only contains 216 colors out of a possible 256. That is because the remaining 40 col- ors vary on Macs and PCs. By eliminating the 40 variable colors, this palette is optimized for cross-plat- form use.” —Lynda Weinman (http://www.lynda.com/resources/webpalette.aspx). From the Library of WoweBook.Com ptg 538 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript EXAMPLE 14.3 <html> <head><title>Colors</title> <style type="text/css"> 1 body { font-family:cursive; background-color: blue;} 2 h1 {color: #FFFF33;} /* yellow */ 3 p { color: white ;} </style> </head> 4 <body> <font size="+2"> 5 <h1>Welcome to my Stylin' Page</h1> 6 <p>This paragraph is all white text on a blue background.<br /> Do you like it? I think it has potential. </p> </body> </html> EXPLANATION 1 A style is defined for the background of the document. It will be blue. 2 The text for all <h1> tags will be yellow (#FFFF33 is yellow). 3 Paragraphs will have white text. 4 The body color of the page was defined in the CSS style sheet to be blue. 5 The heading level <h1> is displayed in its yellow style. 6 Any text enclosed in <p> </p> will be white against a blue body. The font was also set by CSS. See Figure 14.3 for output. Figure 14.3 Colored text and background. From the Library of WoweBook.Com 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 532 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.4 Common Style Sheet Properties In the previous examples, font-family and color are. style sheets defined throughout this chapter and later as properties of the style object used with JavaScript. The Web Design Group provides a complete listing of this information at http://www.htmlhelp.com/reference/css/properties.html. EXPLANATION 1. Library of WoweBook.Com ptg 534 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript Text Alignment (Continued) text-align left, right, center, justify All text-indent 3em,