Part III: CSS for Presentation 216 The Font Properties The shortcut font property Specifying multiple font properties for each text element could get repetitive and lengthy, so the creators of CSS provided the shorthand font property that compiles all the font-related properties into one rule. font Values: font-style font-weight font-variant font-size/line-height font-family (see also values in System Fonts sidebar) | inherit Default: depends on default value for each property listed Applies to: all elements Inherits: yes The value of the font property is a list of values for all the font properties we just looked at, separated by character spaces. In this property, the order of the values is important: { font: style weight variant size/line-height font-family } At minimum, the font property must include a font-size value and a font-fami- ly value, in that order. Omitting one or putting them in the wrong order causes the entire rule to be invalid. This is an example of a minimal font property value: p { font: 1em sans-serif; } Once you’ve met the size and family requirements, the other values are optional and may appear in any order prior to the font-size. When style, weight, or variant are omitted, they will revert back to normal. There is one value in there, line-height, that we have not seen before. As it sounds, it adjusts the height of the text line from baseline to baseline. It appears just after font-size, separated by a slash, as shown in these examples. h3 { font: oblique bold small-caps 1.5em/1.8em Verdana, Arial, sans-serif; } h2 { font: bold 1.75em/2 sans-serif; } Let’s use the shorthand font property to make some changes to the h2 headings. System Fonts The font property also allows designers to specify fonts from the operating system of the user’s computer or other viewing device. This may be useful when designing a web application that blends in with the surrounding desktop environment. The system font values for the font property are: caption used for captioned controls (buttons, menus, etc.) icon used to label icons menu used in drop-down menus and menu lists message-box used in dialog boxes small-caption used for labeling small controls status-bar used in window status bars System Fonts The font property also allows designers to specify fonts from the operating system of the user’s computer or other viewing device. This may be useful when designing a web application that blends in with the surrounding desktop environment. The system font values for the font property are: caption used for captioned controls (buttons, menus, etc.) icon used to label icons menu used in drop-down menus and menu lists message-box used in dialog boxes small-caption used for labeling small controls status-bar used in window status bars One last tweak to the menu, then we’ll take a brief break. I want the h2 headings to be in a bold, Georgia (serif ) typeface to stand out from the surrounding text. I also want it to be 1.2 times larger than the body font. Instead of writing out three declarations, we’ll combine them in one shorthand font property. Add this rule to the style sheet, save your work, and take another look in the browser (Figure 12-13). Notice that the font-size and font-family are next to one another and are the last things in the list of values. h2 { font: bold 1.2em Georgia, serif; } You might find it redundant that I included the bold font- weight value in this rule. After all, the h2 elements were already bold, right? The thing about shorthand properties is that if you omit a value, it is reset to the default value for that property; it doesn’t just leave it the way it was before. In this case, the default value for font-weight is normal . Because a style sheet rule we’ve written overrides the browser’s default bold rendering of headings, the h2 s would appear in normal weight text if we don’t explicitly make them bold in the font property. Shorthand properties can be tricky that way pay attention that you don’t leave something out and override a default or inherited value you were counting on. exercise 12-1 | Formatting a menu (continued) Changing Text Color Chapter 12, Formatting Text 217 h2 after {font: bold 1.2em Georgia, serif;}h2 before Figure 12-13. Changing multiple properties for h2 elements with the shorthand font property Changing Text Color You got a glimpse of how to change text color in Chapter 11, and to be honest, there’s not a lot more to say about it here. You change the color of text with the color property. color Values: color value (name or numeric) | inherit Default: depends on the browser and user’s preferences Applies to: all elements Inherits: yes Using the color property is very straightforward. The value of the color property can be one of 17 predefined color names or a numeric value describ- ing a specific RGB color. Here are a few examples, all of which make the h1 elements in a document gray: h1 { color: gray; } h1 { color: #666666; } h1 { color: #666; } Don’t worry about the numeric values for now—I just wanted you to see what they look like. RGB color is discussed in detail in Chapter 13, Colors and Backgrounds, so in this chapter, we’ll just stick with the fairly limited list of color names (see sidebar) for demonstration purposes. Color is inherited, so you could change the color of all the text in a document by applying the color property to the body element, as shown here: body { color: fuchsia; } OK, so you probably wouldn’t want all your text to be fuchsia, but you get the idea. Color Names The 17 standard color names defined in CSS2.1: black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua orange ( 2.1 only ) A t A G l A n c e Color Names The 17 standard color names defined in CSS2.1: black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua orange ( 2.1 only ) A t A G l A n c e Part III: CSS for Presentation 218 A Few More Selector Types For the sake of accuracy, I want to point out that the color property is not strictly a text-related property. In fact, according to the CSS specification, it is used to change the foreground (as opposed to the background) color of an element. The foreground of an element consists of both the text it contains as well as its border. When you apply a color to an element (including image elements), that color will be used for the border as well, unless there is a specific border-color property that overrides it. We’ll talk more about borders and border color in Chapter 14, Thinking Inside the Box. Before we add color to the online menu, I want to take a little side trip and introduce you to a few more types of selectors that will give us much more flexibility in targeting elements in the document for styling. A Few More Selector Types So far, we’ve been using element names as selectors. In the last chapter, you saw how selectors can be grouped together in a comma-separated list so you can apply properties to several elements at once. Here are examples of the selectors you already know. element selector p { color: navy; } grouped selectors p, ul, p, td, th { color: navy; } The disadvantage of selecting elements this way, of course, is that the prop- erty (in this case, navy blue text) will apply to every paragraph and other listed elements in the document. Sometimes, you want to apply a rule to a particular paragraph or paragraphs. In this section, we’ll look at three selec- tor types that allow us to do just that: descendant selectors, ID selectors, and class selectors. Descendant selectors A descendant selector targets elements that are contained within (therefore descendants of) another element. It is an example of a contextual selector, because it selects the element based on its context or relation to another ele- ment. The sidebar, Other Contextual Selectors, lists some more. Descendant selectors are indicated in a list separated by a character space. This example targets emphasized text (em) elements, but only when they appear in list items (li). Emphasized text in paragraphs and other elements would be unaffected (Figure 12-14). li em { color: olive; } A character space between element names means that the second element must be contained within the first. A character space between element names means that the second element must be contained within the first. A Few More Selector Types Chapter 12, Formatting Text 219 li em {property: value;} html head body title style h2p em ul em li li li em em em Figure 12-14. Only em elements within li elements are selected. The other em elements are unaffected. Here’s another example that shows how contextual selectors can be grouped in a comma-separated list, just as we saw earlier. This rule targets em ele- ments, but only when they appear in h1, h2, and h3 headings. h1 em, h2 em, h3 em { color: red; } It is also possible to nest descendant selectors several layers deep. This exam- ple targets em elements that appear in anchors (a) in ordered lists (ol). ol a em { font-variant: small-caps; } ID selectors Way back in Chapter 5, Marking Up Text, we learned about the id attribute that gives an element a unique identifying name (its id reference). The id attribute can be used with any (X)HTML element, and it is commonly used to give meaning to the generic div and span elements. (We also saw it used in Chapter 6, Adding Links to create document fragments and in Chapter 9, Forms to associate a text label with its respective form control.) ID selectors allow you to target elements by their id values. The symbol that identifies ID selectors is the octothorpe (#), also called a hash symbol. Here is an example of a list item with an id reference. <li id="catalog1234">Happy Face T-shirt</li> Now you can write a style rule just for that list item using an ID selector, like so (notice the # preceding the id reference): li#catalog1234 { color: red; } Because id values must be unique in the document, it is acceptable to omit the element name. This rule is equivalent to the last one: #catalog1234 { color: red; } Other Contextual Selectors Descendant selectors are one of three types of contextual selectors. The other two, child selectors and adjacent sibling selectors, are defined in CSS2.1 but unfortunately, are not supported in Internet Explorer 6 and earlier. They are supported in IE7. A child selector is similar to a descendant selector, but it targets only the direct children of a given element (there may be no other hierarchical levels in between). They are indicated with the greater than symbol (>). This rule affects emphasized text, but only when it is directly contained in a p element. The em elements in other elements, such as list items ( li ) or anchors ( a ) would not be affected. p > em {font-weight: bold; } An adjacent sibling selector is used to target an element that comes directly after another element with the same parent. It is indicated with a plus (+) sign. This rule gives special treatment just to paragraphs that follow an h1 . Other paragraphs are unaffected. h1 + p {font-style: italic;} Other Contextual Selectors Descendant selectors are one of three types of contextual selectors. The other two, child selectors and adjacent sibling selectors, are defined in CSS2.1 but unfortunately, are not supported in Internet Explorer 6 and earlier. They are supported in IE7. A child selector is similar to a descendant selector, but it targets only the direct children of a given element (there may be no other hierarchical levels in between). They are indicated with the greater than symbol (>). This rule affects emphasized text, but only when it is directly contained in a p element. The em elements in other elements, such as list items ( li ) or anchors ( a ) would not be affected. p > em {font-weight: bold; } An adjacent sibling selector is used to target an element that comes directly after another element with the same parent. It is indicated with a plus (+) sign. This rule gives special treatment just to paragraphs that follow an h1 . Other paragraphs are unaffected. h1 + p {font-style: italic;} The # symbol identifies an ID selector. The # symbol identifies an ID selector. ID values must start with a letter (A-Z or a-z). In addition to let- ters, the name may contain digits (0-9), hyphens (-), underscores (_), colons (:), and periods (.). R e m I n D e R ID values must start with a letter (A-Z or a-z). In addition to let- ters, the name may contain digits (0-9), hyphens (-), underscores (_), colons (:), and periods (.). R e m I n D e R Part III: CSS for Presentation 220 A Few More Selector Types You can also use an ID selector as part of a contextual selector. In this example, a style is applied only to li elements that appear within any element identi- fied as “sidebar.” In this way, you can treat list items in the sidebar differently than all the other list items on the page without any additional markup. #sidebar li { margin-left: 10px; } You should be beginning to see the power of selectors and how they can be used strategically along with well-planned, semantic markup. Class selectors One last selector type, then we can get back to text style properties. The other element identifier you learned about in Chapter 5 is the class identifier, used to classify elements into a conceptual group. Unlike the id attribute, multiple elements may share a class name. Not only that, an element may belong to more than one class. You can target elements belonging to the same class with, you guessed it, a class selector. Class names are indicated with a period (.) in the selector. For example, to select all paragraphs with class="special", use this selector (the period indicates the following word is a class selector): p.special { color: orange; } To apply a property to all elements of the same class, omit the element name in the selector (be sure to leave the period; it’s the character that indicates a class). This would target all paragraphs and any other element that has been marked up with class="special". .special { color: orange; } Specificity 101 In Chapter 11, I introduced you to the term specificity, which refers to the fact that more specific selectors have more weight when it comes to handling style rule conflicts. Now that you know a few more selectors, it is a good time to revisit this very important concept. The actual system CSS uses for calculating selector specificity is quite com- plicated, but this list of selector types from most to least specific should serve you well in most scenarios. ID selectors are more specific than (and will override) Class selectors, which are more specific than (and will override) Contextual selectors, which are more specific than (and will override) Individual element selectors So, for example, if a style sheet has two conflicting rules for the strong element, strong { color: red;} h1 strong { color: blue; } • • • • The period (.) symbol indicates a class selector. The period (.) symbol indicates a class selector. Try using a contextual (descendant) selector before adding unnecessary class attributes to your markup. It will keep your markup simple and your style sheet streamlined. To read more, see Tantek Çelik’s blog post, Context before Class, at tantek.com/ log/2002/12.html#atoc_cbeforec. It is a few years old, but still relevant. c S S t I P Try using a contextual (descendant) selector before adding unnecessary class attributes to your markup. It will keep your markup simple and your style sheet streamlined. To read more, see Tantek Çelik’s blog post, Context before Class, at tantek.com/ log/2002/12.html#atoc_cbeforec. It is a few years old, but still relevant. c S S t I P The Universal Selector CSS2 introduced a universal element selector ( * ) that matches any element (like a wildcard in programming languages). The style rule * {color: gray; } makes every element in a document gray. It is also useful as a contextual selector, as shown in this example that selects all elements in an intro section: #intro * { color: gray; } The universal selector causes problems with form controls in some browsers. If your page contains form inputs, the safest bet is to avoid the universal selector. The Universal Selector CSS2 introduced a universal element selector ( * ) that matches any element (like a wildcard in programming languages). The style rule * {color: gray; } makes every element in a document gray. It is also useful as a contextual selector, as shown in this example that selects all elements in an intro section: #intro * { color: gray; } The universal selector causes problems with form controls in some browsers. If your page contains form inputs, the safest bet is to avoid the universal selector. A Few More Selector Types Chapter 12, Formatting Text 221 the contextual selector (h1 strong) is more specific and therefore has more weight than the element selector. You can use specificity strategically to keep your style sheets simple and your markup minimal. For example, it is possible to set a style for an element (p, in this example), then override when necessary by using more specific selectors. p { line-height: 1.2em; } blockquote p { line-height: 1em; } p.intro { line-height: 2em; } In these examples, p elements that appear within a blockquote have a smaller line height than ordinary paragraphs. However, all paragraphs with a class of “intro” will have a 2em line height, even if it appears within a blockquote, because class selectors are more specific than contextual selectors. Understanding the concepts of inheritance and specificity are critical to mas- tering CSS. There is a lot more to be said about specificity, including a tuto- rial by Andy Clarke that uses a Star Wars analogy to bring the point home. References are provided in the More About Specificity sidebar. Now, back to the menu. Fortunately, our Black Goose Bistro has been marked up thoroughly and semantically, so we have a lot of options for selecting spe- cific elements. Give these new selectors a try in Exercise 12-2. More About Specificity The specificity overview in this chapter is enough to get you started, but when you get more experienced and your style sheets become more complicated, you may find that you need a more thorough understanding of the inner workings. For the very technical explanation of exactly how specificity is calculated, see the CSS Recommendation at www.w3.org/TR/2003/WD-CSS21- 20030915/cascade.html#specificity. Eric Meyer provides a thorough, yet more digestible, description of this system in his book, Cascading Style Sheets, The Definitive Guide, 2nd Edition (O’Reilly Media). I also recommend the online article, CSS: Specificity Wars , by Andy Clarke which explains specificity in terms of “Sith power” using characters from Star Wars (www. stuffandnonsense.co.uk/archives/ css_specificity_wars.html). He also provides a list of links to further specificity resources. More About Specificity The specificity overview in this chapter is enough to get you started, but when you get more experienced and your style sheets become more complicated, you may find that you need a more thorough understanding of the inner workings. For the very technical explanation of exactly how specificity is calculated, see the CSS Recommendation at www.w3.org/TR/2003/WD-CSS21- 20030915/cascade.html#specificity. Eric Meyer provides a thorough, yet more digestible, description of this system in his book, Cascading Style Sheets, The Definitive Guide, 2nd Edition (O’Reilly Media). I also recommend the online article, CSS: Specificity Wars , by Andy Clarke which explains specificity in terms of “Sith power” using characters from Star Wars (www. stuffandnonsense.co.uk/archives/ css_specificity_wars.html). He also provides a list of links to further specificity resources. exercise 12-2 | Using selectors This time, we'll add a few more style rules using descendant, ID, and class selectors combined with the font and color properties we’ve learned about so far. I’d like to add some color to the “new item!” elements next to certain menu item names. They are marked up as strong , so we can apply the color property to the strong element. Add this rule to the embedded style sheet, save the file, and reload it in the browser. strong { color: maroon; } That worked, but now the strong element “Very spicy” in the description is maroon, too, and that’s not what I want. The solution is to use a contextual selector that targets only the strong elements that appear in dt elements. Try this and take a look. dt strong { color: maroon; } Look at the document source and you will see that the content has been divided into three unique div s: header , appetizers , and entrees . We can use these to our advantage when it comes to styling. For now, let’s do something simple and make all the text in the header teal. Because color inherits, we only need to apply the property to the div and it will be passed down to the h1 and p . #header { color: teal; } Now let’s get a little fancier and make the paragraph inside the header italic in a way that doesn’t affect the other paragraphs on the page. Again, a contextual selector is the answer. This rule selects only paragraphs contained within the header section of the document. #header p { font-style: italic; } 1. 2. 3. exercise 12-2 | Using selectors This time, we'll add a few more style rules using descendant, ID, and class selectors combined with the font and color properties we’ve learned about so far. I’d like to add some color to the “new item!” elements next to certain menu item names. They are marked up as strong , so we can apply the color property to the strong element. Add this rule to the embedded style sheet, save the file, and reload it in the browser. strong { color: maroon; } That worked, but now the strong element “Very spicy” in the description is maroon, too, and that’s not what I want. The solution is to use a contextual selector that targets only the strong elements that appear in dt elements. Try this and take a look. dt strong { color: maroon; } Look at the document source and you will see that the content has been divided into three unique div s: header , appetizers , and entrees . We can use these to our advantage when it comes to styling. For now, let’s do something simple and make all the text in the header teal. Because color inherits, we only need to apply the property to the div and it will be passed down to the h1 and p . #header { color: teal; } Now let’s get a little fancier and make the paragraph inside the header italic in a way that doesn’t affect the other paragraphs on the page. Again, a contextual selector is the answer. This rule selects only paragraphs contained within the header section of the document. #header p { font-style: italic; } 1. 2. 3. Part III: CSS for Presentation 222 Text Line Adjustments Text Line Adjustments The next batch of text properties has to do with the treatment of whole lines of text rather than the shapes of characters. They allow web authors to for- mat web text with indents, extra leading (space between lines), and different horizontal alignments, similar to print. I want to give special treatment to all of the prices on the menu. Fortunately, they have all been marked up with span elements, like this: <span class="price">$3.95</span> So now all we have to do is write a rule using a class selector to change the font to Georgia or some serif font and make them italic. .price { font-style: italic; font-family: Georgia, serif; } Similarly, I can change the appearance of the text in the header that has been marked up as belonging to the “label” class to make them stand out. .label { font-weight: bold; font-variant: small-caps; font-style: normal; } Finally, there is a warning at the bottom of the page that I want to make small and red. It has been given the class “warning,” so I can use that as a selector to target just that paragraph for styling. While I’m at it, I’m going to apply the same style to the sup element (the footnote asterisk) earlier on the page so they match. Note that I’ve used a grouped selector so I don’t need to write a separate rule. p.warning, sup { font-size: x-small; color: red; } Figure 12-15 shows the results of all these changes. Figure 12-15. The current state of the Black Goose Bistro online menu. 4. 5. 6. Text Line Adjustments Chapter 12, Formatting Text 223 Line height The line-height property defines the minimum distance from baseline to baseline in text. A baseline is the imaginary line upon which the bottoms of characters sit. Line height in CSS is similar to leading in traditional typeset- ting. Although the line height is calculated from baseline to baseline, most browsers split the extra space above and below the text, thus centering it in the overall line height (Figure 12-16). The line-height property is said to specify a “minimum” distance because if you put a tall image on a line, the height of that line will expand to accom- modate it. line-height Values: number, length measurement, percentage | normal | inherit Default: normal Applies to: all elements Inherits: yes These examples show three different ways of making the line height twice the height of the font size. p { line-height: 2; } p { line-height: 2em; } p { line-height: 200%; } When a number is specified alone, as shown in the first example, it acts as a scaling factor that is multiplied by the current font size to calculate the line- height value. Line heights can also be specified in one of the CSS length units, but once again, the relative em unit is your best bet. Ems and percentage val- ues are based on the current font size. In the three examples, if the text size is 16 pixels, the calculated line height would be 32 pixels (see Figure 12-16). Size of 1 em for this text Baseline line-height: 2em; line height is set to 2em (twice the text size); the extra space is divided equally above and below the text line, centering it vertically in the line height. Figure 12-16. In CSS, line height is measured from baseline to baseline, but browsers center the text vertically in the line height. WA RN IN G There is a bug in Internet Explorer 6 and earlier that causes line height to get screwy when the element contains an inline image (or other replaced element). For details, see positioniseverything.net/ explorer/lineheightbug.html. WA RN IN G There is a bug in Internet Explorer 6 and earlier that causes line height to get screwy when the element contains an inline image (or other replaced element). For details, see positioniseverything.net/ explorer/lineheightbug.html. Part III: CSS for Presentation 224 Text Line Adjustments Indents The text-indent property indents the first line of text by a specified amount (see note). text-indent Values: length measurement, percentage | inherit Default: 0 Applies to: block-level elements and table cells Inherits: yes You can specify a length measurement or a percentage value for text-indent. Percentage values are calculated based on the width of the parent element. Here are a few examples. The results are shown in Figure 12-17. p#1 { text-indent: 2em; } p#2 { text-indent: 25%; } p#3 { text-indent: -35px; } 2em 25% –35px Figure 12-17. Examples of the text-indent property. Notice in the third example, a negative value was specified and that’s just fine. It will cause the first line of text to hang out to the left of the left text edge (also called a hanging indent). The text-indent property inherits, but it is worth noting that the calculated values will be passed on to descendant elements. So if a div is set to 800 pix- els wide with a 10% indent, a text-indent of 80 pixels will be passed down (not the 10% value). Horizontal Alignment You can align text for web pages just as you would in a word processing or desktop publishing program with the text-align property. N ot e The text-indent property indents just the first line of a block. If you want space along the whole side of the text block, use one of the margin or padding prop- erties to add it. Designers may be accustomed to specify- ing indents and margins in tandem, but to be consistent with how CSS handles them, margins will be discussed as part of the box model in Chapter 16. N ot e The text-indent property indents just the first line of a block. If you want space along the whole side of the text block, use one of the margin or padding prop- erties to add it. Designers may be accustomed to specify- ing indents and margins in tandem, but to be consistent with how CSS handles them, margins will be discussed as part of the box model in Chapter 16. If you use a hanging indent, be sure that there is also a left margin applied to the element. Otherwise, the hanging text may disappear off the left edge of the browser window. D e S I G n t I P If you use a hanging indent, be sure that there is also a left margin applied to the element. Otherwise, the hanging text may disappear off the left edge of the browser window. D e S I G n t I P Underlines and Other “Decorations” Chapter 12, Formatting Text 225 text-align Values: left | right | center | justify | inherit Default: left for languages that read left to right; right for languages that read right to left; Applies to: block-level elements and table cells Inherits: yes This is a fairly straightforward property to use. The results of the various text-align values are shown in Figure 12-18. text-align: left aligns text on the left margin text-align: right aligns text on the right margin text-align: center centers the text in the text block text-align: justify aligns text on both right and left margins text-align: left text-align: right text-align: center text-align: justify Figure 12-18. Examples of text-align values. Good news—only four more text properties to go! Then we’ll be ready to try a few of them out in the Black Goose Bistro menu. Underlines and Other “Decorations” If you want to put a line under, over, or through text, or if you’d like to turn the underline off under links, then the text-decoration is the property for you. text-decoration Values: none | underline | overline | line-through | blink | inherit Default: none Applies to: all elements Inherits: no, but since lines are drawn across child elements they may look like they are “decorated” too . font property also allows designers to specify fonts from the operating system of the user’s computer or other viewing device. This may be useful when designing a web application that blends. font property also allows designers to specify fonts from the operating system of the user’s computer or other viewing device. This may be useful when designing a web application that blends. treatment of whole lines of text rather than the shapes of characters. They allow web authors to for- mat web text with indents, extra leading (space between lines), and different horizontal