426 P a r t I : C o r e M a r k u p Note that returns as well as S P A C E S are preserved.</xmp> Compatibility HTML 2 Firefox 1+, Internet Explorer 2+, Netscape 1+, Opera 2.1+, Safari 1+ Notes • This element was first deprecated under HTML 3.2, yet all major browsers continue to support it, and it is well documented and even extended for Internet Explorer. The <pre> tag or style sheets should be used instead of this tag. • Note that the MSDN documentation does not show oncopy and onbeforecopy events for this element but testing shows they do work up until IE 8. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 4 Introduction to CSS CHAPTER 5 CSS Syntax and Property Reference CHAPTER 6 CSS3 Proprietary and Emerging Features Reference II Core Style PART Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. This page intentionally left blank Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 4 Introduction to CSS I n the past, much of the visual formatting of Web pages was supplied by markup elements, squarely mixing the concepts of logical and physical markup into the mess that is classic HTML. Strict variants of (X)HTML deprecated the elements and attributes that focused on presentation, providing a clear distinction between the structure provided by markup and the look dictated by a style sheet written in Cascading Style Sheets (CSS) syntax. The distinct division of duties between markup and style can provide numerous production, maintenance, and even performance benefits, making it a far superior presentation solution to markup alone. Presentational HTML Traditionally, for right or wrong, markup has been used for formatting. For example, many HTML elements support the align attribute, which provides simple support for text alignment. Combine these aspects of markup with the assumption of visual rendering, such as the belief that h1 elements always should make text big, and it would actually seem clear to some that HTML is meant for formatting, as demonstrated here: <h1 align="center">Big Centered Text!</h1> Now an argument can be made about the semantic value of the h1 specifying a headline, but for those solely coming at HTML from a point of view of knowing what a tag does, the idea that an <h1> tag makes something big wins out. Yet, beyond such misunderstandings based upon observation rather than the intent of the specification, there are elements that are strictly presentational, like font, which is part of HTML 3.2, 4.01 transitional, and XHTML 1.0 transitional specifications: <font size="7" color="red">I am big and red!</font> Further, when looking at browser-specific elements, plenty of presentational markup can be found. For example, the following markup <blink>Proprietary HTML Tag Sale: 50% Off for Firefox Users!</blink> 429 429 CHAPTER Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 430 P a r t I I : C o r e S t y l e 430 P a r t I I : C o r e S t y l e creates blinking text in Firefox, while this markup <marquee>Sale! Sale! Sale! All Presentation Tags Must Go!!!</marquee> animates text in nearly any browser. History has already been written. Like it or not, markup has been used to visually present Web pages for well over a decade. The problem with using HTML for formatting is that it just isn’t really very good at it, nor was it generally designed for it. For example, just to make some centered red text with a yellow background, you’d likely resort to using markup like so: <table align="center" width="100%"> <tr> <td bgcolor="yellow" align="center"> <font size="7" color="red" face="Arial, Helvetica, sans-serif"> Big Red HTML Text </font> </td> </tr> </table> When using HTML for Web page presentation, we see a tremendous amount of markup being used to style the page, often filled with complex stacked or even nested tables. Layout workarounds using invisible pixel images, proprietary elements and attributes, text in images, and other arcane ideas were, and often still are, required to deliver quality, high-fidelity design in HTML. Fortunately, for now and the future, there is a better way—style sheets. The Slow Rise of CSS Cascading Style Sheets (www.w3.org/Style/CSS/) offers what Web designers have been clamoring for over the years: more control over layout. Interestingly, the excitement about CSS has been quite slow to build. CSS1 marked its first appearance as a standard in late 1996 and CSS2 quickly followed in 1998. Early browsers such as Internet Explorer 3 and Netscape 4 supported some of the technology, but CSS has had trouble gaining widespread acceptance. Browser support has been quite inconsistent, and significant bugs, particularly in older of versions of Internet Explorer, have made the use of CSS a lesson in frustration. For visual proof of this, consider the CSS2 conformance tests called Acid2 (www.acidtests .org/), which exercises many important features of CSS1 and CSS2. Figure 4-1 shows Internet Explorer 6 and Firefox 2 both failing this test. However, with the release of Internet Explorer 8 and Firefox 3 and past conformance of other browsers like Opera and Safari, all the major browsers now pass the Acid2 test (see Figure 4-2). Considering that the introduction of that test was in 2005 and for many years previous CSS support was spotty, finally we see that CSS is changing for the better! NOTE As this edition goes to print, many browsers pass Acid3 as well. The point here is to show that in the past few years CSS has become viable and appropriate, and that it took a while to get there, rather than to declare any browser a winner or loser in a standards race. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C h a p t e r 4 : I n t r o d u c t i o n t o C S S 431 PART II C h a p t e r 4 : I n t r o d u c t i o n t o C S S 431 Newer versions of browsers are far better than their predecessors, and now have good support for CSS1 and CSS 2.1 as well as many features from CSS3. Yet even as CSS support has become more commonplace, significant issues remain. Browser bugs still exist, portions of the CSS specification remain unsupported, developer education and uptake is lagging, and proprietary extensions to style sheets are rapidly being introduced by browser vendors. It seems the more things change the more they stay the same regardless of the technology in use. HTML wonks who have spent time addressing quirks and workarounds will find plenty of new ones to address in the world of CSS. We’ll return to this sad fact at the end of the chapter when we discuss the pragmatic use of CSS, but now let’s take our first look at CSS. FIGURE 4-1 Older browsers failing Acid2 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 432 P a r t I I : C o r e S t y l e 432 P a r t I I : C o r e S t y l e First Look at CSS CSS rules are defined as a property name followed by a colon and then a property value. Individual rules are terminated by semicolons, with the final rule having an optional semicolon: property-name1 : value1; property-nameN : valueN; FIGURE 4-2 Modern browsers passing Acid2 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C h a p t e r 4 : I n t r o d u c t i o n t o C S S 433 PART II C h a p t e r 4 : I n t r o d u c t i o n t o C S S 433 CSS rules can be placed directly within most (X)HTML tags by setting the core attribute style to the rule. For example, to set the color and alignment of an h1 heading, we might use <h1 style="color: red; text-align: center;">Big Red CSS Text!</h1> Such direct use of CSS is called inline style and is the least favorable form of CSS because of its tight coupling to the actual (X)HTML tags. Instead of placing rules directly within markup elements, we might more appropriately create a rule that binds to a particular element or set of elements, which will lend itself for future reuse. CSS rules not found within a particular tag consist of a selector followed by its associated style declarations within curly braces. Similar to being used inline, a style rule is composed of property names and property values separated by colons, with each style declaration (property/value pair) in turn being separated by a semicolon. In general, the syntax is selector {property1 : value1; propertyN : valueN;} An example rule conforming to correct CSS syntax broken out into its individual components is shown here: NOTE The final declaration in a style rule block does not require the semicolon. However, for good measure and easy insertion of future properties, page authors should always use semicolons after all style properties. CSS property names are separated by dashes when they are multiple words—for example, font-face, font-size, line-height, and so on. Allowed values come in many forms; from simple keywords like xx-small, strings like "Arial", plain numbers like 0, numbers with units like 100px or 2cm, and special delimited values such as URLs, url( / styles/fancy.css) . Given this brief CSS syntax overview, to create a style dictating that all h1 elements are red and centered, use the following rule: h1 {color: red; text-align: center;} As rules are added, you may take advantage of the fact that CSS is not terribly whitespace sensitive, so h1 {font-size:xx-large;color:red;font-family:Arial;} h1 {font-size: xx-large; color: red;} Property Name Declaration Declaration BlockSelector Declaration Rule Value Declaration Separation Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 434 P a r t I I : C o r e S t y l e 434 P a r t I I : C o r e S t y l e will render the same as h1 {font-size: xx-large; color:red; font-family:Arial;} Given the nature of white space in CSS, you may find formatting leads to better readability for future development. Also like traditional coding, we should add comments using the common programming language syntax /* */ like so: /* first CSS rule below */ h1 {font-size: 28px; color: red; font-family: Arial;} Of course, when publishing CSS and HTML on public-facing Web sites, removing comments and reducing white space to improve delivery and slightly obfuscate execution may be appropriate. Lastly, case should be well considered. In CSS, property names and many values are case insensitive, so h1 {FONT-SIZE:28px;color:RED;FONT-WEIGHT:bold;} and h1 {font-size:28px;color:red;font-weight:bold;} are the same. However, in some important cases, such as with URL values, font names, and certain selectors such as id and class values, case will be enforced. For example, #foo {background-image url(tile.gif); font-family: Arial;} and #FOO {background-image url(TILE.GIF); font-family: ARIaL;} will not necessarily be the same, with the URL sometimes working depending on the Web server involved, the fonts potentially not matching, and the differing id selectors possibly not working unless an extremely permissive browser is in play. Given the potential for confusion, it is much safer to assume that CSS is case sensitive. When not placed directly inline, style rules would be placed either within a <style> tag found in the document head <style type="text/css"> /* a sample style sheet */ h1 {color: red; text-align: center;} p {line-height: 150%;} </style> or will be externalized and referenced via a <link> tag found in the head of the document, like so: <link href="mystyle.css" rel="stylesheet" type="text/css"> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. C h a p t e r 4 : I n t r o d u c t i o n t o C S S 435 PART II C h a p t e r 4 : I n t r o d u c t i o n t o C S S 435 Given that link would be an empty element if we were using XHTML as our base document, the <link> tag requires the trailing slash: <link href="mystyle.css" rel="stylesheet" type="text/css" /> The external style sheet would solely contain CSS rules, and no HTML markup would be found. A small example here illustrates this: /* mystyle.css - a sample style sheet */ h1 {color: red; text-align: center;} p {line-height: 150%;} To build a style sheet, we need to define the rules that select elements and apply various style properties to them. Besides element selectors, previously introduced, the two most common forms of CSS rules are id selectors, which are used to specify a rule to bind to a particular unique element, and class selectors, which are used to specify a group of elements. Elements are named in (X)HTML using the id attribute, which is found on nearly any element. As an example, here we identify a particular <h1> tag as the primary headline of the document: <h1 id="primaryHeadline">CSS Works Fine!</h1> Now that the tag is named, we can bind a style rule just for it by using a #id-value selector like so: #primaryHeadline {color: black; font-size: xx-large; font-weight: bold;} The values for id must be unique, so in order to affect a select group of tags, we relate them by setting their class attribute to the same value: <p class="fancy">I’m fancy!</p> <p>Poor me I am a plain paragraph.</p> <p>I am not completely fancy, but <span class="fancy">part of me is</span>!</p> Notice that we utilized a <span> tag around a portion of content we desired to style. We’ll see generic elements like span and div commonly employed with CSS. Now to bind a rule to the elements in the class fancy, we use a selector of the form .class-name like so: .fancy {background-color: orange; color: black; font-style: italic;} There is nothing that keeps an element from being identified with both an id and a class attribute. Further, it is not required that a tag be found in only one class, as shown here: <p id="p1" class="fancy modernLook2">This unique paragraph called p1 will sport a fancy and modern look.</p> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... must be set and thus the W3C validator will complain if the attribute is not set regardless of the appearance of the tag Check the current situation by validating the file http://htmlref.com/ ch4/metacsscheck .html using the W3 validator service Depending on the result, you may notice that specifications or the tools that check them aren’t always perfect Embedding Style Sheets The second way to... clearly, let’s illustrate the idea of these techniques using probably the most famous hack the “box model hack.”1 What the box model hack addresses is the nasty fact that CSS implementations in older browsers, particularly the Internet Explorer 5.X generation, is woefully broken In the case of such browsers, the measurements of the various large block elements that compose the boxes of the page are fundamentally... should ignore the declaration Given h1 {color: red; trouble: right-here;} the property trouble would simply be ignored and the rule would simply set the color It does not matter what the position of the bogus property declaration is, the result should be the same as long as the declaration is otherwise well formed h1 {trouble: right-here; color: red;} The case is obviously different if the various separators... tag within the head element of the document To indicate the relationship between the documents, set the rel attribute to a value of "stylesheet." The href attribute is used to specify the URL of the style sheet to fetch The URL may be relative or even remote, pointing to a style sheet on some other server, though you should be cautious about linking to remote files, given download delays and the possibility... portions of text There are numerous other CSS properties we might employ besides the few we see here, and we will explore those throughout the book, but for now this sampling is enough to get our first example up and running In Figure 4-5, we see the CSS version of the page as compared to the HTML- only version Plain HTML HTML styled by CSS FIGURE 4-5 Example Hello CSS World rendering PART II The preceding... occurrences of the style element within the head of the document, and you can even import some styles with these elements, as discussed next Importing Style Sheets Another way to use document-wide style rules rather than type the properties directly within a tag is to import them The idea is somewhat similar to linking An external style sheet is still referenced, but in this case, the reference... possibility that the file could be changed without your knowledge The type attribute is set to indicate the type of style sheet technology in use, as defined by the MIME type text/css The media attribute can be used to set how the style sheet should be applied When omitted, the default is "all" Later in the chapter, we will discuss how it is possible to define different styles for screen, print, and other potential... even the various property names and values are not directly spelled out in the grammar and are left to the prose of the specification In fact, the forward-looking nature of the CSS specification gives some latitude here in terms of such values instead of specifying the rules for what a browser should do when faced with properties or values it doesn’t understand, as discussed in the next section The. .. When you embed a style sheet, you generally write the style rules directly within the document with a tag found within the head of the document The basic syntax of the tag is as follows: * style rules here * Here, the type attribute is again used to indicate the MIME type of the enclosed style sheet However, this is quite... correspondingly shown onscreen Other values are possible for the media attribute but generally not supported Within the style block, style sheet rules are included It is important to note that once within the tag, the rules of (X )HTML do not necessarily apply The tag defines an island of CSS within an ocean of markup The two technologies are intertwined, but have their own distinct characteristics . 439 <hr> <p>CSS <em class="fancy">really</em> isn't so hard either!</p> <p>Soon you will also <span. document: <!DOCTYPE html& gt; < ;html& gt; <head> <meta http-equiv="Content-Type" content="text /html; charset=utf-8"> <title>Hello