JavaScript by Example (2nd Edition)
| Webster's Dictionary defines "style" as a manner of doing something very grandly; elegant, fashionable. Style sheets make HTML pages elegant by allowing the designer to create definitions to describe the layout and appearance of the page. This is done by creating a set of rules that define how an HTML element will look in the document. For example, if you want all H1 elements to produce text with a green color , set in an Arial 14-point font face centered in the page, normally you would have to assign these attributes to each H1 element as it occurs within the document, which could prove quite time consuming. With style sheets you can create the style once and have that definition apply to all H1 elements in the document. If you don't have a lot of time to learn how to create style sheets, an excellent alternative is Macromedia's Dreamweaver MX. For more on authoring tools, see http://www.w3.org/Style/CSS/#editors. 15.2.1 What Does CSS Mean?
CSS is short for Cascading Style Sheets and is a standard defined by the World Wide Web Consortium (W3C), first made official in December of 1996. They are called cascading because the effects of a style can be inherited or cascaded down to other tags. This gets back to the parent/child relationship we talked about in Chapter 12, "Handling Events," and the DOM. If a style has been defined for a parent tag, any tags defined within that style may inherit that style. Suppose a style has been defined for a <p> tag. The text within these tags has been set to blue and the font is set to Arial. If within the <p> tag, another set of tags is embedded, such as <b> or <em> , then those tags will inherit the blue color and the Arial font. The style has cascaded down from the parent to the child. But this is a simplistic definition of cascading. The rules can be very complex and involve multiple style sheets coming from external sources as well as internal sources. And even though a browser may support style sheets, it may resolve the conflicting CSS information differently or it may not support the cascading part of it at all. 15.2.2 What Is a CSS-Enhanced Browser?
A CSS-enhanced browser supports CSS and will recognize the style tag <style> as a container for a style sheet, and based on the definition of the style, will produce the document accordingly . Most modern browsers, such as IE4+, Netscape 4+, Opera 3.5+, and Apple's Safari Web browser and Mozilla support CSS, and the majority of Web users are running a CSS-enhanced browser. However, just because a browser is CSS enhanced, doesn't mean that it is flawless or without limitiations. And just because a browser is not CSS enhanced, doesn't mean that it can't see the content of a page. [1] [1] For an updated overview of available browsers, see the W3C overview page: http://www.w3.org/Style/CSS/#browsers. Traditionally, browsers have silently ignored unknown tags, so if an old browser happens to encounter a <style> tag, its content will be treated simply as part of the document. It is also possible to hide the <style> tag within HTML comments if the browser is too old to recognize CSS, or it might just be a good time to upgrade to a newer model. (See "CSS Comments" on page 498 for more on this.) 15.2.3 How Does a Style Sheet Work?
A style sheet consists of the style rules that tell your browser how to present a document. The rules consist of two parts : a selector ”the HTML element you are trying to stylize, and the declaration block ”the properties and values that describe the style for the selector. FORMAT This rule sets the color of the H2 element to blue:
H2 { color: blue } A rule, then, consists of two main parts: the selector (e.g., H2 ) and the declaration block (e.g., color: blue ). The following example demonstrates this simple rule. Example 15.1
<html><head><title>First Style Sheet</title> 1 <style type="text/css"> 2 h1 { color: red } h2 { color: blue } </style> </head> <body bgcolor=silver> 3 <h1> Welcome to my Stylin' Page</h1> 4 <h2> What do you think?</h2> </body> </html> EXPLANATION
Figure 15.1. Style sheet with Internet Explorer (top) and with Nescape (bottom). If this book was in color, you would be able to see that the h1 is in red, and the h2 is in blue.
CSS Comments
CSS comments, like C language comments, are enclosed in /* */. They are the textual comments that are ignored by the CSS parser when your style is being interpreted, and are used to clarify what you are trying to do. They cannot be nested.
H1 { color: blue } /* heading level 1 is blue */ Grouping
Grouping is used to reduce the size of style sheets. For example, you can group selectors in comma-separated lists, if you want the same rule to apply to all of the elements:
H1, H2, H3 { font-family: arial; color: blue } Now all three heading levels will contain blue text in an Arial font face. You can also group a set of declarations to create the style for a selector(s). The following rule combines a number of declarations describing the font properties for an H1 element:
H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: verdana; } And you can group the values for a particular property as follows :
h2 {font: bold 24pt arial} Example 15.2
<html> <head><title>Grouping Properties</title> <style type="text/css"> 1 h1,h2,h3 { color: blue } /* grouping selectors */ 2 h1 { /* grouping declarations */ font-weight: bold; font-size: 30pt; font-family: verdana; } 3 h2 { /* grouping a property's values */ font: bold 24pt arial } </style> </head> <body bgcolor=silver> 4 <h1> Welcome to my Stylin' Page</h1> 5 <h2> What do you think?</h2> 6 <h3> Groovy!</h3> </body> </html> EXPLANATION
Units of Measurement
You can express the size of a given property in different units of measurement; for example, 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. Table 15.1 introduces the types of measurements that are often used in style sheets. Table 15.1. CSS units of measurement.
Examples:
15.2.4 Common Style Sheet Properties (Attributes)
In the previous examples, font-family and color are properties (also called attributes), and by assigning values to them, the style of the document is defined. Listed in Table 15.2 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. Table 15.2. Style sheet properties.
[a] A replaced element has set or calculated dimensions, such as img, select, textarea . Working with Colors
What is style without color? Table 15.3 lists the properties 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 ) (see Tables B.1 and B.2 in Appendix B for a full list). 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 dull. In Chapter 10, "The Browser Objects: Navigator, Windows, and Frames," we discussed the screen object. It has a property called colorDepth that will tell you how many colors in bits a computer can handle. For example, a color-bit depth of 4 will display 16 colors and a color-bit depth of 32 will provide 16.7 million colors. How many colors can your computer display? There are a number of color charts available on the Web that provide Web-safe color palettes. See www.lynda.com, www.paletteman.com, or www.visibone.com. Table 15.3. Color properties.
Example 15.3
<html><head><title>Colors</title> <style type="text/css"> 1 body { background-color: blue } 2 h1 { color: #FFFF33; } 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? </p> </body> </html> EXPLANATION
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 15.4). 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 15.5), and will go from left to right, selecting the one available on your computer. Table 15.4. Font properties.
Table 15.5. Font families.
Example 15.4
<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
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 15.6 may be your answer. Table 15.6. Text alignment properties.
Example 15.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; } 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 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. 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. </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 in order 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 ID Selector" on page 523. 2 Text controls are defined in the rule. The text will be centered, underlined , with a 22pt, bold Arial font. The spacing between each letter and each word is defined 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 2% from the left margin. 4 This paragraph is identifying itself with the title ID. This means that for this paragraph, 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. Figure 15.5. A report with a centered title, double-spaced lines, and indented paragraphs.
Working with Backgrounds and Images
The same way that wallpaper in a guest room can create a sense of warmth or calm, background 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 15.7. Table 15.7. Image and background properties.
Example 15.6
<html> <head><title>Backgrounds</title> <style type="text/css"> 1 body {background-color:"pink" ; 2 background-image: url(/books/4/357/1/html/2/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
Figure 15.6. Background color and a repeating image.
Working with Margins and Borders
When you look at your document, it is composed of a number of containers. 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. 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 border 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 15.7 for a graphic representation, and Table 15.8 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 15.7. How an element is contained.
Table 15.8. Margin and border properties.
Example 15.7
<html> <head><title>Margins and Borders</title> <style type="text/css"> 1 body { margin-top: 1cm; margin-left: 2cm ; 2 margin-bottom: 1cm; margin-right: 2cm; 3 border-width: thick; border-style:solid; border-color: red blue green yellow; padding:15px; } h1{ /* grouping properties */ font-weight: bold; font-size: 30pt; font-family: verdana; } h2 { /* grouping a property's values */ 4 border-style:dotted; border-color:purple; font: bold 24pt arial } </style> </head> <body bgcolor=silver> <h1>Crossing the Border!</h1> <h2>Welcome!</h2> <h3>Nice country.</h3> </body> </html> EXPLANATION
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||