Learning Web Design Third Edition- P22 ppsx

Part III: CSS for Presentation 196 The Big Concepts p {font-size: small; font-family: sans-serif;} html head body title style h1 p p h2 p p p h2 p p em img em em Figure 11-7. Certain properties applied to the p element are inherited by their children. Notice that I’ve been saying “certain” properties are inherited. It’s important to note that some style sheet properties inherit and others do not. In gen- eral, properties related to the styling of text—font size, color, style, etc.—are passed down. Properties such as borders, margins, backgrounds, and so on that affect the boxed area around the element tend not to be passed down. This makes sense when you think about it. For example, if you put a border around a paragraph, you wouldn’t want a border around every inline element (such as em, strong, or a) it contains as well. You can use inheritance to your advantage when writing style sheets. For example, if you want all text elements to be rendered in the Verdana font face, you could write separate style rules for every element in the document and set the font-face to Verdana. A better way would be to write a single style rule that applies the font-face property to the body element, and let all the text elements contained in the body inherit that style (Figure 11-8). p {font-size: small; font-family: sans-serif;} html head body title style h1 p p h2 p p p h2 p p em img em em If you apply a font-related property to the body element, it will be passed down to all the text elements in the document (note that font properties do not apply to the img element, so it is excluded). Figure 11-8. All the elements in the document inherit certain properties applied to the body element. The Big Concepts Chapter 11, Cascading Style Sheets Orientation 197 Any property applied to a specific element will override the inherited values for that property. Going back to the article example, we could specify that the em element should appear in a serif font, and that would override the inherited sans-serif setting. Conflicting styles: the cascade Ever wonder why they are called “cascading” style sheets? CSS allows you to apply several style sheets to the same document, which means there are bound to be conflicts. For example, what should the browser do if a document’s imported style sheet says that h1 elements should be red, but its embedded style sheet has a rule that makes h1s purple? The folks who wrote the style sheet specification anticipated this problem and devised a hierarchical system that assigns different weights to the vari- ous sources of style information. The cascade refers to what happens when several sources of style information vie for control of the elements on a page: style information is passed down until it is overridden by a style command with more weight. For example, if you don’t apply any style information to a web page, it will be rendered according to the browser’s internal style sheet (we’ve been calling this the default rendering). However, if the web page’s author provides a style sheet for the document, that has more weight and overrides the browser’s styles. Individual users can apply their own styles to documents as well, as discussed in the Reader Style Sheets sidebar. As we’ve learned, there are three ways to attach style information to the source document, and they have a cascading order as well. Generally speaking, the closer the style sheet is to the content, the more weight it is given. Embedded style sheets that appear right in the document in the style element have more weight than external style sheets. In the example that started this sec- tion, the h1 elements would end up purple as specified in the embedded style sheet, not red as specified in the external .css file that has less weight. Inline styles have more weight than embedded style sheets because you can’t get any closer to the content than a style right in the element’s opening tag. To prevent a specific rule from being overridden, you can assign it “importance” with the !important indicator, as explained in the Assigning Importance sidebar. The sidebar, Style Sheet Hierarchy, provides an overview of the cascading order from general to specific. Specificity Once the applicable style sheet has been chosen, there may still be conflicts; therefore, the cascade continues at the rule level. When two rules in a single style sheet conflict, the type of selector is used to determine the winner. The Reader Style Sheets It is possible for users to write their own style sheets and apply them to the pages they see with their browser. The CSS Recommendation refers to these as reader style sheets (in practice, it is more common to use the term user style sheets). Normally, style rules provided by an author style sheet (external, embedded, or inline) override the reader’s style sheet. However, if the user marks a style as “important,” it will trump all other styles provided by the author and the browser (see the Assigning Importance sidebar). So, for example, a user with impaired vision could write a style rule that makes all web text appear in extra large black text on a white background and be guaranteed to see it that way. That’s precisely the W3C’s intent in allowing reader style sheets and giving them the power to override all other styles. Reader Style Sheets It is possible for users to write their own style sheets and apply them to the pages they see with their browser. The CSS Recommendation refers to these as reader style sheets (in practice, it is more common to use the term user style sheets). Normally, style rules provided by an author style sheet (external, embedded, or inline) override the reader’s style sheet. However, if the user marks a style as “important,” it will trump all other styles provided by the author and the browser (see the Assigning Importance sidebar). So, for example, a user with impaired vision could write a style rule that makes all web text appear in extra large black text on a white background and be guaranteed to see it that way. That’s precisely the W3C’s intent in allowing reader style sheets and giving them the power to override all other styles. Part III: CSS for Presentation 198 The Big Concepts more specific the selector, the more weight it is given to override conflicting declarations. It’s a little soon to be discussing specificity because we’ve only looked at one type of selector (and the least specific type, at that). For now, put the term specificity and the concept of some selectors overriding others on your radar. We will revisit it in Chapter 12 when you have more selector types under your belt. Rule order Finally, if there are conflicts within style rules of identical weight, whichever one comes last in the list “wins.” Take these three rules, for example: <style type="text/css"> p { color: red; } p { color: blue; } p { color: green; } </style> In this scenario, paragraph text will be green because the last rule in the style sheet, that is, the one closest to the content in the document, overrides the earlier ones. Style Sheet Hierarchy Style information can come from various sources, listed here from general to specific. Items lower in the list will override items above them: Browser default settings User style settings (set in a browser as a “reader style sheet”) Linked external style sheet (added with the link element) Imported style sheets (added with the @import function) Embedded style sheets (added with the style element) Inline style information (added with the style attribute in an opening tag) Any style rule marked !important by the author Any style rule marked !important by the reader (user)         Style Sheet Hierarchy Style information can come from various sources, listed here from general to specific. Items lower in the list will override items above them: Browser default settings User style settings (set in a browser as a “reader style sheet”) Linked external style sheet (added with the link element) Imported style sheets (added with the @import function) Embedded style sheets (added with the style element) Inline style information (added with the style attribute in an opening tag) Any style rule marked !important by the author Any style rule marked !important by the reader (user)         Assigning Importance If you want a rule not to be overridden by a subsequent conflicting rule, include the !important indicator just after the property value and before the semicolon for that rule. For example, to make paragraph text blue always, use the following rule: p {color: blue !important;} Even if the browser encounters an inline style later in the document (which should override a document-wide style sheet), like this one: <p style="color: red"> that paragraph will still be blue, because the rule with the !important indicator cannot be overridden by other styles in the author’s style sheet. The only way an !important rule may be overridden is by a conflicting rule in a reader (user) style sheet that has also been marked !important . This is to ensure that special reader requirements, such as large type for the visually impaired, are never overridden. Based on the previous examples, if the reader’s style sheet includes this rule: p {color: black;} the text would still be blue, because all author styles (even those not marked !important ) take precedence over the reader’s styles. However, if the conflicting reader’s style is marked !important , like this: p {color: black !important;} the paragraphs will be black and cannot be overridden by any author-provided style. The Big Concepts Chapter 11, Cascading Style Sheets Orientation 199 N ote This “last-one-listed wins” rule applies in other contexts in CSS as well. For example, later declarations in a declaration block can override earlier declarations. In addition, external style sheets listed later in the source will be given precedence over those listed above them (even style sheets embedded with the style element). The box model As long as we’re talking about “big CSS concepts,” it is only appropriate to introduce the cornerstone of the CSS visual formatting system: the box model. The easiest way to think of the box model is that browsers see every element on the page (both block and inline) as being contained in a little rectangular box. You can apply properties such as borders, margins, padding, and backgrounds to these boxes, and even reposition them on the page. We’re going to go into a lot more detail about the box model in Chapter 14, but having a general feel for the box model will benefit you even as we discuss text and backgrounds in the following two chapters. To see the elements roughly the way the browser sees them, I’ve written style rules that add borders around every content element in our sample article. h1 { border: 1px solid blue; } h2 { border: 1px solid blue; } p { border: 1px solid blue; } em { border: 1px solid blue; } img { border: 1px solid blue; } Figure 11-9 shows the results. The borders reveal the shape of each block ele- ment box. There are boxes around the inline elements (em and img), as well. Notice that the block element boxes expand to fill the available width of the browser window, which is the nature of block elements in the normal docu- ment flow. Inline boxes encompass just the characters or image they contain. Figure 11-9. Rules around all the elements reveal their element boxes. Part III: CSS for Presentation 200 Moving Forward with CSS Grouped Selectors Hey! This is a good opportunity to show you a handy style rule shortcut. If you ever need to apply the same style property to a number of elements, you can group the selectors into one rule by separating them with commas. This one rule has the same effect as the five rules listed previously. Grouping them makes future edits more efficient and results in a smaller file size. h1, h2, p, em, img { border: 1px solid blue; } Now you’ve got two selector types in your toolbox: a simple element selector, and grouped selectors. Moving Forward with CSS This chapter covered all the fundamentals of Cascading Style Sheets, includ- ing rule syntax, ways to apply styles to a document, and the central concepts of inheritance, the cascade, and the box model. Style sheets should no longer be a mystery, and from this point on, we’ll merely be building on this founda- tion by adding properties and selectors to your arsenal as well as expanding on the concepts introduced here. CSS is a vast topic, well beyond the scope of this book. The bookstores and Web are loaded with information about style sheets for all skill levels. I’ve compiled a list of the resources I’ve found the most useful during my learning process. I’ve also provided a list of popular tools that assist in writing style sheets in the CSS Tools sidebar. Books There is no shortage of good books on CSS out there, but these are the ones that taught me, and I feel good recommending them. Cascading Style Sheets: The Definitive Guide, Second Edition, by Eric Meyer (O’Reilly) Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm (Friends of Ed) The Zen of CSS Design: Visual Enlightenment for the Web, by Dave Shea and Molly E. Holzschlag (New Riders) Eric Meyer on CSS: Mastering the Language of Web Design, by Eric Meyer (New Riders) Online Resources The sites on the following page are good starting points for online explora- tion of style sheets. Pop Quiz Can you guess why I didn’t just add the border property to the body element and let it inherit to all the elements in the grouped selector? Answer: Because border is one of those properties that is not inherited, as noted earlier. Pop Quiz Can you guess why I didn’t just add the border property to the body element and let it inherit to all the elements in the grouped selector? Answer: Because border is one of those properties that is not inherited, as noted earlier. Moving Forward with CSS Chapter 11, Cascading Style Sheets Orientation 201 World Wide Web Consortium (www.w3.org/Style/CSS) The World Wide Web Consortium oversees the development of web tech- nologies, including CSS. A List Apart (www.alistapart.com) This online magazine features some of the best thinking and writing on cutting-edge, standards-based web design. It was founded in 1998 by Jeffrey Zeldman and Brian Platz. css-discuss (www.css-discuss.org) This is a mailing list and related site devoted to talking about CSS and how to use it. Inspirational CSS showcase sites If you are looking for excellent examples of what can be done with CSS, check out these sites. CSS Zen Garden (www.cssgarden.com) This is a showcase site for what can be done with CSS, a single XHTML file, and the creative ideas of hundreds of designers. Its creator and keeper is standards expert Dave Shea. See the companion book listed above. CSS Beauty (www.cssbeauty.com) A showcase of excellent sites designed in CSS. Informative personal sites Some of the best CSS resources are the blogs and personal sites of individuals with a passion for CSS-based design. These are only a few, but they provide a good entry point into the online standards community. Stopdesign (www.stopdesign.com) Douglas Bowman, CSS and graphic design guru, publishes articles and trend-setting tutorials. Mezzoblue (www.mezzoblue.com) This is the personal site of Dave Shea, creator of the CSS Zen Garden. Meyerweb (www.meyerweb.com) This is the personal site of the king of CSS, Eric Meyer. Molly.com (www.molly.com) This is the blog of prolific author and web-standards activist Molly E. Holzschlag. Simplebits (www.simplebits.com) This is the personal site of standards guru and author Dan Cederholm. CSS Tools The W3C maintains a list of current CSS authoring tools on the CSS home page at www.w3.org/Style/ CSS/#editors. Here are a couple that I can personally recommend. Web Developer Extension Web developers are raving about the Web Developer extension for Firefox and Mozilla browsers, written by Chris Pederick. The extension adds a toolbar to the browser with tools that enable you to analyze and manipulate any page in the window. You can edit the style sheet for the page you are viewing as well as get information about the (X)HTML and graphics. It also validates the CSS, (X)HTML, and accessibility of the page. Get it at chrispederick.com/ work/firefox/webdeveloper or from the Addons page at mozilla.org. Web Authoring Programs Current WYSIWYG authoring programs such as Adobe Dreamweaver and Microsoft Expression Web can be configured to write a style sheet for you automatically as you design the page. The downside is that they are not always written in the most efficient manner (for example, they tend to overuse the class attribute to create style rules). Still, they may give you a good head start on the style sheet that you can then edit manually. CSS Tools The W3C maintains a list of current CSS authoring tools on the CSS home page at www.w3.org/Style/ CSS/#editors. Here are a couple that I can personally recommend. Web Developer Extension Web developers are raving about the Web Developer extension for Firefox and Mozilla browsers, written by Chris Pederick. The extension adds a toolbar to the browser with tools that enable you to analyze and manipulate any page in the window. You can edit the style sheet for the page you are viewing as well as get information about the (X)HTML and graphics. It also validates the CSS, (X)HTML, and accessibility of the page. Get it at chrispederick.com/ work/firefox/webdeveloper or from the Addons page at mozilla.org. Web Authoring Programs Current WYSIWYG authoring programs such as Adobe Dreamweaver and Microsoft Expression Web can be configured to write a style sheet for you automatically as you design the page. The downside is that they are not always written in the most efficient manner (for example, they tend to overuse the class attribute to create style rules). Still, they may give you a good head start on the style sheet that you can then edit manually. Part III: CSS for Presentation 202 Test Yourself Test Yourself Here are a few questions to test your knowledge of the CSS basics. Answers are provided in Appendix A. Identify the various parts of this style rule: blockquote { line-height: 1.5; } selector: _______________ value: ____________________ property: ______________ declaration: ________________ What color will paragraphs be when this embedded style sheet is applied to a document? Why? <style type="text/css"> p { color: purple; } p { color: green; } p { color: gray; } </style> Rewrite each of these CSS examples. Some of them are completely incor- rect and some could just be written more efficiently. p {font-face: sans-serif;} p {font-size: 1em;} p {line-height: 1.2em;} blockquote { font-size: 1em line-height: 150% color: gray } body {background-color: black;} {color: #666;} {margin-left: 12em;} {margin-right: 12em;} p {color: white;} blockquote {color: white;} li {color: white;} <strong style="red">Act now!</strong> 1. 2. 3. a. b. c. d. e. html head body title style h1 p p p img h2 ph2 strong li li li ul div id= intro div id=main Figure 11-10. The document structure of a sample document. Circle all the elements in the diagram that you would expect to appear in red when the following style rule is applied to an XHTML document with the structure diagrammed in Figure 11-10. This rule uses a type of selec- tor you haven’t seen yet, but common sense should serve you well. div#intro { color: red; } 4. 203 IN THIS CHAPTER The font-related properties Text color Text line settings such as line height, indents, and alignment Underlines and overlines Capitalization Letter and word spacing Descendant (contextual), ID, and class selectors Specificity 101 Now that you’ve gotten your feet wet formatting text, are you ready to jump into the deep end? By the end of this chapter, you’ll pick up fourteen new CSS properties used to manipulate the appearance of text. Along the way, you’ll also learn how to use more powerful selectors for targeting elements in a particular context, and with a specific id or class name. Throughout this chapter, we’ll be sprucing up the Black Goose Bistro online menu that we marked up back in Chapter 5, Marking Up Text. I encourage you to work along with the exercises to get a feel for how the properties work. Figure 12-1 shows how the menu looked the last time we saw it and how it will look when we’re done. It’s not a masterpiece, but it is certainly an improvement. Before After Figure 12-1. Before and after views of the Black Goose Bistro menu that we’ll be working on in this chapter. FORMATTING TEXT (Plus More Selectors) CHAPTER 12 Part III: CSS for Presentation 204 The Font Properties The Font Properties When I design a text document (especially for print, but also for the Web), one of the first things I do is specify the font. In CSS, fonts are specified using a little bundle of font-related properties for typeface, size, weight, and font style. There is also a shortcut property that lets you specify all of the font attributes in one fell swoop. The nature of the Web makes specifying type tricky, if not downright frustrating, particularly if you have experience designing for print (or even formatting text in a word processing program). Because you have no way of knowing which fonts are loaded on users’ machines, you can’t be sure that everyone will see text in the font you’ve chosen. And because the default font size varies by browser and user preferences, you can’t be sure how large or small the type will appear, as well. We’ll address the best practices for dealing with these font challenges as we go along. Specifying the font name Choosing a typeface, or font family as it is called in CSS, is a good place to start. Let’s begin with the easy part: using the property font-family and its values. font-family Values: one or more font or generic font family names, separated by commas | inherit Default: depends on the browser Applies to: all elements Inherits: yes Use the font-family property to specify a font or list of fonts by name as shown in these examples. body { font-family: Arial; } tt { font-family: Courier, monospace; } p { font-family: "Trebuchet MS", Verdana, sans-serif; } All font names, with the exception of generic font families, must be capital- ized. For example, use “Arial” instead of “arial”. Notice that font names that contain a character space (such as Trebuchet MS in the third example) must appear within quotation marks. Use commas to separate multiple font names as shown in the second and third examples. You might be asking, “Why specify more than one font?” That’s a good question, and it brings us to one of the challenges of specifying fonts for web pages. Font limitations Browsers are limited to displaying fonts that are already installed on the user’s machine. So, although you may want the text to appear in Futura, if Futura is not installed on the user’s computer, the browser’s default font will be used instead. The font-related properties: font-family font-size font-weight font-style font-variant font       A t A G l A n c e The font-related properties: font-family font-size font-weight font-style font-variant font       A t A G l A n c e A Word About Property Listings Each new property listing in this book is accompanied by information on how it behaves and how to use it. Here is a quick explanation of each part of property listings. Values These are the accepted values for the property according to the CSS2.1 specification. Predefined values appear in code font (for example, small , italic , or small-caps ) and must be typed in exactly as shown. Default This is the value that will be used for the property by default, that is, if no other value is specified. Note that the browser uses a style sheet with values that may vary from the defaults defined in CSS. Applies to Some properties apply only to certain types of elements, such as block or table elements. Inherits This indicates whether the property will be passed down to the selected element’s descendants. See Chapter 11, Cascading Style Sheets Orientation for an explanation of inheritance. A Word About Property Listings Each new property listing in this book is accompanied by information on how it behaves and how to use it. Here is a quick explanation of each part of property listings. Values These are the accepted values for the property according to the CSS2.1 specification. Predefined values appear in code font (for example, small , italic , or small-caps ) and must be typed in exactly as shown. Default This is the value that will be used for the property by default, that is, if no other value is specified. Note that the browser uses a style sheet with values that may vary from the defaults defined in CSS. Applies to Some properties apply only to certain types of elements, such as block or table elements. Inherits This indicates whether the property will be passed down to the selected element’s descendants. See Chapter 11, Cascading Style Sheets Orientation for an explanation of inheritance. The Font Properties Chapter 12, Formatting Text 205 Fortunately, CSS allows you to provide a list of back-up fonts should your first choice not be available. In the third example above, if the browser does not find Trebuchet MS, it will use Verdana, and if Verdana is not available, it will substitute some other sans-serif font. Generic font families That last option, “some other sans-serif font,” bears more discussion. “Sans- serif” is just one of five generic font families that you can specify with the font-family property. When you specify a generic font family, the browser chooses an available font from that stylistic category. Figure 12-2 shows examples from each family. Generic font family names do not need to be capitalized. serif Examples: Times, Times New Roman, Georgia Serif typefaces have decorative serifs, or slab-like appendages, on the ends of certain letter strokes. sans-serif Examples: Arial, Arial Black, Verdana, Trebuchet MS, Helvetica, Geneva Sans-serif typefaces have straight letter strokes that do not end in serifs. They are generally considered easier to read on computer monitors. monospace Examples: Courier, Courier New, and Andale Mono In monospace (also called constant width) typefaces, all characters take up the same amount of space on a line. For example, a capital W will be no wider than a lowercase i. Compare this to proportional typefaces (such as the one you’re reading now) that allot different widths to different char- acters. cursive Examples: Apple Chancery, Zapf-Chancery, and Comic Sans Cursive fonts emulate a script or handwritten appearance. These are rarely specified for professional web pages. fantasy Examples: Impact, Western, or other decorative font Fantasy fonts are purely decorative and would be appropriate for head- lines and other display type. Fantasy fonts are rarely used for web text due to cross-platform availability and legibility. All of the font properties are related to the shapes of characters. All of the font properties are related to the shapes of characters. . for CSS-based design. These are only a few, but they provide a good entry point into the online standards community. Stopdesign (www.stopdesign.com) Douglas Bowman, CSS and graphic design guru,. Cascading Style Sheets Orientation 201 World Wide Web Consortium (www.w3.org/Style/CSS) The World Wide Web Consortium oversees the development of web tech- nologies, including CSS. A List Apart. by Eric Meyer (O’Reilly) Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm (Friends of Ed) The Zen of CSS Design: Visual Enlightenment for the Web, by Dave Shea and Molly