P~esentcztion
`
`T'h e De n i ~i ve Gu i ~e
`
`~' RE I LLY~
`
`Epic A. Meyer
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`001
`
`

`
`Cascading Style Sheets
`The Definitive Guide
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`002
`
`

`
`Other resources from O'Reilly
`Dynamic HTML: The Defini-
`tive Reference
`JavaScript ~ DHTML
`Cookbook
`Web Design in a Nutshell
`
`Related titles HTML & XHTML: The
`Definitive Guide
`JavaScript: The Definitive
`Guide
`
`oreilly.com
`
`Conferences
`
`oreilly.com is more than a complete catalog of O'Reilly books.
`You'll also find links to news, events, articles, weblogs, sample
`chapters, and code examples.
`°reillynet.com is the essential portal for developers interested in
`~~..~ oR~ open and emerging technologies, including new platforms, pro-
`r ~`'°' 'REILLY
`~~ . .. ,,
`gramming languages, and operating systems.
`O'Reilly ~ Associates brings diverse innovators together to nur-
`ture the ideas that spark revolutionary industries. We specialize
`in documenting the latest tools and systems, translating the in-
`novator's knowledge into useful skills for those in the trenches.
`Visit conferences.oreilly.com for our upcoming events.
`Safari Bookshelf (safari.oreilly.com) is the premier online refer-
`o°REILLYNETWORK
`ence library for programmers and IT professionals. Conduct
`Safari~
`Bookshelf Searches across more than 1,000 books. Subscribers can zero in
`on answers to time-critical questions in a matter of seconds.
`Read the books on your Bookshelf from cover to cover or sim-
`ply flip to the page you need. Try it today with a free trial.
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`003
`
`

`
`SECOiVD EDITION
`
`Castadin St le Sheets
`g Y
`The Definitive Guide
`
`Eric A. Meyer
`
`U~REILLY~
`Beijing •Cambridge •Farnham Koln •Paris •Sebastopol •Taipei •Tokyo
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`004
`
`

`
`j
`
`i
`
`Cascading Style Sheets: The Definitive Guide, Second Edition
`
`~'`~~ 's;"~~~
`
`_(~!~~,. _(_1O~,~~ i.~~IZ~'~I~~ ~~(, .~i~.. I ! •: _
`
``,ll :'i'Itts res~:vecl.
`
`I'~;h . ,'ne~~:_l t-~~~ ~_~,':~< <~;I'I~~ ..1<~,li.~. gin,__. 1 '~ ~; i ,~~av~r~s~ein I-ti~h~vay North, Sebastopol, CA 95472.
`~~ l,~.i 'lla~(~C~ tOT' ~i~tlCfltlOri&1, tJUS1rieSS, OPSaleSpT'OT110t10riillUS2.
`I;~rtt'.75CriL~e'S(StdfGdYt.0Y22lIy.COYYI~.FOP1T10I'e1rifOT'111at10T1,C011taCCOUT
`~5~t~~ ll.11t I1!,CIfUC<<~:"~ If -..~~~~ ,~~.~~~:~;~[iT3cfll. ~,,`~'lll)1 ~)~)g-9g38 0T'GOY~JOYGLt2~0Y2llly.COYYt.
`^~ls~ily ''Wood and T_<~rrie LeJeune
`l antek C~:elik grid Ian Hickson
`~arIc~~ve Shaeffer
`Ellie Volckhausen
`David Fucato
`
`~~~~~ ~ ~ i'l;l'
`~ ~' K~1~ ~-~ ~,(u!1,7, jli
`C?t;ii _~~I;~~~,il',,ltc.l;'-:~'~,'.11iI~~~
`
`Editol'S:
`
`Technical Editors:
`Productiion EditoC:
`CoveK Desigt~eP:
`lnteriar Designer:
`
`Prir~ring HisCory:
`~iav ?000:
`~Sarch 2004:
`
`First Edition.
`Second Edition.
`
`Nutshell Handbook, the Nutshell Handbook logo, and the O'Reilly logo are registered trademarks of
`O'Reilly Media, Inc. Cascading Style Sheets: The Definitive Guide, the image of salmon, and related trade
`dress are trademarks of O'Reilly Media, Inc.
`Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
`trademarks. Where those designations appear in this book, and O'Reilly Media, Inc. was aware of a
`trademark claim, the designations have been printed in caps or initial caps.
`While every precaution has been taken in the preparation of this book, the publisher and author assume
`no responsibility for errors or omissions, or for damages resulting from the use of the information
`contained herein.
`
`R-~Ko~M
`
`This book uses RepKover`; a durable and flexible lay-flat binding.
`
`ISBN: 0-596-00525-3
`
`~M~
`
`[5/06)
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`005
`
`

`
`CHAPTER 1
`CSS and Documents
`
`Cascading Style Sheets (CSS) are a powerful way to affect the presentation of a docu-
`ment or a collection of documents. Obviously, without a document of some sort,
`CSS is basically useless since it would have no content to present. Of course, the defi-
`nition of "document" is extremely broad. For example, Mozilla and related browsers
`use CSS to affect the presentation of the browser chrome itself. Still, without the con=
`tent of the chrome—buttons, address inputs, dialog boxes, windows, and so on—
`there would be no need for CSS (or any other presentational information) .
`
`The Il~eb's Fall from Grace
`Back in the dimly remembered, early years of the Web (1990-1993), HTML was a
`fairly lean language. It was composed almost entirely of structural elements that were
`useful for describing things like paragraphs, hyperlinks, lists, and headings. It had
`nothing even remotely approaching tables, frames, or the complex markup we
`assume is a necessary part of creating web pages. The general idea was that HTML
`would be a structural markup language, used to describe the various parts of a docu-
`ment. Very little was said about how those parts should be displayed. The language
`wasn't concerned with appearance. It was just a clean little markup scheme.
`
`Then came Mosaic.
`Suddenly, the power of the World Wide Web was obvious to almost anyone who
`spent more than 10 minutes playing with it. Jumping from one document to another
`was no harder than pointing the mouse cursor at a specially colored bit of text, or
`even an image, and clicking the mouse button. Even better, text and images could be
`displayed together, and all you needed to create a page was aplain-text editor. It was
`free, it was open, and it was cool.
`Web sites began to spring up everywhere. There were personal journals, university
`sites, corporate sites, and more. As the number of sites increased, so did the demand
`for new HTML elements that would each perform a specific function. Authors
`started demanding that they be able to make text boldfaced, or italicized.
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`006
`
`

`
`At the time, HTML wasn't equipped to handle those sorts of desires. You could
`declare a bit of text to be emphasized, but that wasn't necessarily the same as being
`italicized—it could be boldfaced instead, or even normal text with a different color,
`depending on the user's browser and her preferences. There was nothing to ensure
`that what the author created was what the reader would see.
`As a result of these pressures, markup elements like <B> and <I> started to creep into
`the language. Suddenly, a structural language started to become presentational.
`
`What a Mess
`Years later, we have inherited the problems of this haphazard process. Large parts of
`HTML 3.2 and HTML 4.0, for example, were devoted to presentational consider-
`ations. The ability to color and size text through the font element, to apply back-
`ground colors and images to documents and tables, to use table elements (such as
`cellspacing), and to make text blink on and off are all the legacy of the original cries
`for "more control!"
`For an example of the mess in action, take a quick glance at almost any corporate
`web site's markup. The sheer amount of markup in comparison to actual useful
`information is astonishing. Even worse, for most sites, the markup is almost entirely
`made up of tables and font elements, none of which conveys any real semantic
`meaning to what's being presented. From a structural standpoint, these pages are lit-
`tle better than random strings of letters.
`For example, let's assume that for page titles, an author is using font elements
`instead of heading elements like h1:
`<font size="+3" face="Helvetica" color="red">Page Title</font>
`Structurally speaking, the font tag has no meaning. This makes the document far less
`useful. What good is a font tag to aspeech-synthesis browser, for example? If an
`author uses heading elements instead of font elements, though, the speaking browser
`can use a certain speaking style to read the text. With the font tag, the browser has
`no way to know that the text is any different from other text.
`Why do authors run roughshod over structure and meaning this way? Because they
`want readers to see the page as they designed it. To use structural HTML markup is
`to give up a lot of control over a page's appearance, and it certainly doesn't allow for
`the kind of densely packed page designs that have become so popular over the years.
`But consider the following problems with such a roughshod approach:
`• Unstructured pages make content indexing inordinately difficult. A truly power-
`ful search engine would allow users to search only page titles, or only section
`headings within pages, or only paragraph text, or perhaps only those paragraphs
`that are marked as being important. In order to accomplish such a feat, how-
`ever, the page contents must be contained within some sort of structural
`
`2 ~
`
`Chapter 1: C55 and Documents
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`007
`
`

`
`markup—exactly the sort of markup most pages lack. Google, for example, does
`pay attention to markup structure when indexing pages, so a structural page will
`increase your Google rank.
`• Lack of structure reduces accessibility. Imagine that you are blind and rely on a
`speech-synthesis browser to search the Web. Which would you prefer: a struc-
`tured page that lets your browser read only section headings so that you can
`choose which section you'd like to hear more about; or a page that is so lacking
`in structure that your browser is forced to read the entire thing with no indica-
`tion of what's a heading, what's a paragraph, and what's important? Let's return
`to Google—the search engine is in effect the world's most active blind user, with
`millions of friends who accept its every suggestion about where to surf and shop.
`• Advanced page presentation is possible only with some sort of document struc-
`ture. Imagine a page in which only the section headings are shown, with an
`arrow next to each. The user can decide which section heading applies to him
`and click on it, thus revealing the text of that section.
`• Structured markup is easier to maintain. How many times have you spent sev-
`eral minutes hunting through someone else's HTML (or even your own) in
`search of the one little error that's messing up your page in one browser or
`another? How much time have you spent writing nested tables and font ele-
`ments, just to get a sidebar with white hyperlinks in it? How many linebreak ele-
`ments have you inserted trying to get exactly the right separation between a title
`and the following text? By using structural markup, you can clean up your code
`and make it easier to find what you're looking for.
`Granted, a fully structured document is a little plain. Due to that one single fact, a
`hundred arguments in favor of structural markup won't sway a marketing depart-
`ment from using the type of HTML that was so prevalent at the end of the 20th cen-
`tury, and which persists even today. What we need is a way to combine structural
`markup with attractive page presentation.
`
`CSS to the Rescue
`Of course, the problem of polluting HTML with presentational markup was not lost
`on the World Wide Web Consortium (W3C), which began searching for a quick
`solution. In 1995, the consortium started publicizing awork-in-progress called CSS.
`By 1996, it had become a full Recommendation, with the same weight as HTML
`itself. Here's why.
`
`Rich Styling
`In the first place, CSS allows for much richer document appearances than HTML
`ever allowed, even at the height of its presentational fervor. CSS lets you set colors on
`text and in the background of any element; permits the creation of borders around
`
`CSS to the Rescue ~ 3
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`008
`
`

`
`any element, as well as the increase or decrease of the space around them; lets you
`change the way text is capitalized, decorated (e.g., underlining), spaced, and even
`whether it is displayed at all; and allows you to accomplish many other effects.
`Take, for example, the first (and main) heading on a page, which is usually the title
`of the page itself. The proper markup is:
`<h1>Leaping Above The Water</h1>
`Now, suppose you want this title to be dark red, use a certain font, be italicized and
`underlined, and have a yellow background. To do all of that with HTML, you'd have
`to put the h1 into a table and load it up with a ton of other elements like font and U.
`With CSS, all you need is one rule:
`h1 {color: maroon; font: italic zem Times, serif; text-decoration: underline;
`background: yellow;}
`That's it. As you can see, everything you did in HTML can be done in CSS. There's
`no need to confine yourself to only those things HTML can do, however:
`h1 {color: maroon; font: italic gem Times, serif; text-decoration: underline;
`background: yellow url(titlebg.png) repeat-x;
`border: 1px solid red; margin-bottom: o; padding: 5px;}
`You now have an image in the background of the h1 that is only repeated horizon-
`tally, and a border around it, which is separated from the text by at least five pixels.
`You've also removed the margin (blank space) from the bottom of the element.
`These are feats that HTML can't even come close to matching—and that's just a
`taste of what CSS can do.
`
`Ease of Use
`If the depth of CSS doesn't convince you, then perhaps this will: style sheets can
`drastically reduce a web author's workload.
`First, style sheets centralize the commands for certain visual effects in one handy
`place, instead of scattering them throughout the document. As an example, let's say
`you want all of the h2 headings in a document to be purple. Using HTML, the way to
`do this would be to put a font tag in every heading, like so:
`<h2><font color="purple">This is purple!</font></hz>
`This has to be done for every heading of level two. If you have 40 headings in your
`document, you have to insert 40 font elements throughout, one for each heading!
`That's a lot of work for one little effect.
`Let's assume that you've gone ahead and put in all those font elements. You're done,
`you're happy—and then you decide (or your boss decides for you} that those hz
`headings should really be dark green, not purple. Now you have to go back and fix
`every single one of those font elements. Sure, you might be able to find-and-replace,
`
`4 ~
`
`Chapter 1: CSS and Documents
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`009
`
`

`
`as long as headings are the only purple text in your document. If you've put other
`purple font elements in your document, then you can't find-and-replace because
`you'd affect those too.
`It would be much better to have a single rule instead:
`h2 {color: purple;}
`Not only is this faster to type, but it's easier to change. If you do switch from purple
`to dark green, all you have to change is that one rule.
`Let's go back to the highly styled h2 element from the previous section:
`h1 {color: maroon; font: italic gem Times, serif; text-decoration: underline;
`background: yellow;}
`This may look like it's worse to write than using HTML, but consider a case where
`you have a page with about a dozen h2 elements that should look the same as the h1.
`How much markup will be required for those 12 h2 elements? A lot. On the other
`hand, with CSS, all you need to do is this:
`h1, hz {color: maroon; font: italic gem Times, serif; text-decoration: underline;
`background: yellow;}
`Now the styles apply to both h1 and h2 elements, with just three extra keystrokes.
`If you want to change the way h1 and h2 elements look, the advantages of CSS become
`even more striking. Consider how long it would take to change the HTML markup
`for an hs and 12 h2 elements, compared to changing the previous styles to this:
`h1, h2 {color: navy; font: bold gem Helvetica, sans-serif;
`text-decoration: underline overline; background: silver;}
`If the two approaches were timed on a stopwatch, I'm betting the CSS-savvy author
`would handily beat the HTML jockey.
`In addition, most CSS rules are collected into one location in the document. It is pos-
`sible to scatter them throughout the document by grouping them into associated
`styles or individual elements, but it's usually far more efficient to place all of your
`styles into a single style sheet. This lets you create (or change) the appearance of an
`entire document in one place.
`
`Using Your Styles on Multiple Pages
`But wait—there's more! Not only can you centralize all of the style information for a
`page in one place, but you can also create a style sheet that can then be applied to
`multiple pages. This is done by a process in which a style sheet is saved to its own
`document and then imported by any page for use with that document. Using this
`capability, you can quickly create a consistent look for an entire web site. All you have
`to do is link the single style sheet to all of the documents on your web site. Then, if
`you ever want to change the look of your site's pages, you need only edit a single file
`and the change will be propagated throughout the entire server—automatically!
`
`CSS to the Rescue ~ 5
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`010
`
`

`
`Consider a site where all of the headings are gray on a white background. They get
`this color from a style sheet that says:
`h1, h2, h3, h4, h5, h6 {color: gray; background: white;}
`Now let's say this site has 700 pages, each of which uses the style sheet that says the
`headings should be gray. At some point, it's decided that the headings should be
`white on a gray background. So the site's webmaster edits the style sheet to say:
`h1, h2, h3, h4, h5, h6 {color: white; background: gray;}
`Then she saves the style sheet to disk and the change is made. That sure beats hav-
`ing to edit 700 pages to enclose every heading in a table and a font tag, doesn't it?
`
`Cascading
`That's not all! CSS also makes provisions for conflicting rules; these provisions are
`collectively referred to as the cascade. For instance, take the previous scenario in
`which you import a single style sheet into several web pages. Now inject a set of
`pages that share many of the same styles, but also include specialized rules that apply
`only to them. You can create another style sheet that is imported into those pages, in
`addition to the already existing style sheet, or you could just place the special styles
`into the pages that need them.
`For example, on one page out of the 700, you might want headings to be yellow on
`dark blue instead of white on gray. In that single document, then, you could insert
`this rule:
`h1, h2, h3, h4, h5, h6 {color: yellow; background: blue;}
`Thanks to the cascade, this rule will override the imported rule for white-on-gray
`headings. By understanding the cascade rules and using them to your advantage, you
`can create highly sophisticated sheets that can be changed easily and come together
`to give your pages a professional look.
`The power of the cascade is not confined to the author. Web surfers (or readers) can,
`in some browsers, create their own style sheets (called reader style sheets, obviously
`enough) that will cascade with the author's styles as well as the styles used by the
`browser. Thus, a reader who is colorblind could create a style that makes hyperlinks
`stand out:
`a:link, a: visited {color: white; background: black;}
`A reader style sheet can contain almost anything: a directive to make text large enough
`to read if the user has impaired vision, rules to remove images for faster reading and
`browsing, and even styles to place the user's favorite picture in the background of
`every document. (This isn't recommended, of course, but it is possible.) This lets read-
`ers customize their web experience without having to turn off all of the author's styles.
`Between importing, cascading, and its variety of effects, CSS is a wonderful tool for
`any author or reader.
`
`6 ~
`
`Chapter 1: CSS and Documents
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`011
`
`

`
`Compact File Size
`Besides the visual power of CSS and its ability to empower both author and reader,
`there is something else about it that your readers will like. It can help keep docu-
`ment sizes as small as possible, thereby speeding download times. How? As I've
`mentioned, a lot of pages have used tables and font elements to achieve nifty visual
`effects. Unfortunately, both of these methods create additional HTML markup that
`drives up the file sizes. By grouping visual style information into central areas and
`representing those rules using a fairly compact syntax, you can remove the font ele-
`ments and other bits of the usual tag soup. Thus, CSS can keep your load times low
`and your reader satisfaction high.
`
`Preparing for the Future
`HTML, as I pointed out earlier, is a structural language, while CSS is its comple-
`ment: astylistic language. Recognizing this, the W3C, the body that debates and
`approves standards for the Web, is beginning to remove stylistic elements from
`HTML. The reasoning for this move is that style sheets can be used to create the
`effects that certain HTML elements now provide, so who needs them?
`
`Thus, the XHTML specification has a number of elements that are deprecated—that
`is, they are in the process of being phased out of the language altogether. Eventually,
`they will be marked as obsolete, which means that browsers will be neither required
`nor encouraged to support them. Among the deprecated elements are <font>,
`<basefont>, <u>, <strike>, <s>, and <center>. With the advent of style sheets, none of
`these elements are necessary. And there may be more elements deprecated as time
`goes by.
`
`As if that weren't enough, there is the very strong possibility that HTML will be
`gradually replaced by the Extensible Markup Language (XML). XML is much more
`complicated than HTML, but it is also far more powerful and flexible. Despite this,
`XML does not provide any way to declare style elements such as <i> or <center>.
`Instead, it is quite probable that XML documents will rely on style sheets to deter-
`mine the appearance of documents. While the style sheets used with XML may not
`be CSS, they will probably be whatever follows CSS and very closely resemble it.
`Therefore, learning CSS now gives authors a big advantage when the time comes to
`make the jump to an XML-based Web.
`
`So, to get started, it's very important to understand how CSS and document struc-
`tures relate to each other. It's possible to use CSS to affect document presentation in
`a very profound way, but there are also limits to what you can do. Let's start by
`exploring some basic terminology.
`
`CSS to the Rescue ~ 7
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`012
`
`

`
`Elements
`Elements are the basis of CSS display. In HTML, the most common elements are eas-
`ily recognizable, such as p, table, span, a, and div. In XML languages, the elements
`are defined by the language's Document Type Definition (DTD). Every single element
`in a document plays a part in its presentation. In CSS terms, at least as of CSS2.1, that
`means each element generates a box that contains the element's content.
`Replaced and Nonreplaced Elements
`Although CSS depends on elements, not all elements are created equally. For exam-
`ple, images and paragraphs are not the same type of element, nor are span and div. In
`CSS, elements generally take two forms: replaced and nonreplaced. The two types
`are explored in detail in Chapter 7, which covers the particulars of the box model,
`but I'll address them briefly here.
`
`Replaced elements
`Replaced elements are those where the element's content is replaced by something
`that is not directly represented by document content. The most Familiar XHTML
`example is the img element, which is replaced by an image file external to the docu-
`ment itself. In fact, img has no actual content, as you can see by considering a simple
`example:
`<img src="howdy.gif" />
`This code snippet contains no actual content—only an element name and an
`attribute. The element presents nothing unless you point it to some external content
`(in this case, an image specified by the src attribute). The input element is also
`replaced by a radio button, checkbox, or text input box, depending on its type.
`Replaced elements also generate, boxes in their display.
`
`Nonreplaced elements
`The majority of HTML and XHTML elements are nonreplaced elements. This means
`their content is presented by the user agent (generally a browser) inside a box gener-
`ated by the element itself. For example, <span>hi there</span> is a nonreplaced ele-
`ment, and the text "hi there" will be displayed by the user agent. This is true of
`paragraphs, headings, table cells, lists, and almost everything else in XHTML.
`
`Element Display Roles
`In addition to replaced and nonreplaced elements, CSS2.1 uses two other basic types
`of elements: block-level and inline-level. These types will be more familiar to authors
`who have spent time with HTML or XHTML markup and its display in web brows-
`ers; the elements are illustrated in Figure 1-l.
`
`8 ~
`
`Chapter 1: CSS and Documents
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`013
`
`

`
`1~1 ~l~l~l~~
`
`This ~ar~~ ai~h {p) is a talncl;.-level ~l~m~ilt. TIY~ strasigly cinf~h~siaecl t~~ is an uiline ~eleiri~nt, <ut~l so
`will ]ilia-w~~zp whin neces~uy. Tlie ~~nterzt c~utsir3e wf uiline elements is ~et~~al~ ~ ~»rt ~at the blc~clr
`element. The ~~~antent uisi~t~ uilin~ Flem~nts sr~~ }~ Lis z.~is c~,Ge UelaiYg to the u~lin~.
`
`Figure 1-1. Block- and inline-level elements in an XHTML document
`
`Block-level elements
`Block-level elements generate an element box that (by default) fills its parent ele-
`ment's content area and cannot have other elements at its sides. In other words, it
`generates "breaks" before and after the element box. The most familiar block ele-
`ments £rom HTML are p and div. Replaced elements can be block-level elements, but
`they usually are not.
`List items are a special case of block level elements.`~In addition to behaving in a man-
`ner consistent with other block elements, they generate amarker—typically a "bul-
`let" for unordered lists and a number for ordered lists—that is "attached" to the
`element box. Except for the presence of this marker, list items are in all other ways
`identical to other block elements.
`
`Inline-level elements
`Inline-level elements generate an element box within a line of text and do not break
`up the flow of that line. The best inline element example is the a element in XHTML.
`Other candidates would be strong and em. These elements do not generate a "break"
`before or after themselves, and so they can appear within the content of another ele-
`ment without disrupting its display.
`Note that while the names "block" and "inline" share a great deal in common with
`block- and inline-level elements in XHTML, there is an important difference. In
`HTML and XHTML, block-level elements cannot descend from inline-level elements.
`In CSS, there is no restriction on how display roles can be nested within each other.
`To see how this works, let's consider a CSS property.
`You may have noticed that there are a lot of values, only three of which I've even
`come close to mentioning: block, inline, and list-item. We're not going to explore
`the others now, mostly because they get covered in some detail in Chapter 2 and
`Chapter 7.
`For the moment, let's just concentrate on block and inline. Consider the following
`markup:
`
`<body>
`<p>This is a paragraph with <em>an inline element</em> within it.</p>
`</body>
`
`Elements ~ 9
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`014
`
`

`
`Values:
`
`Initial value:
`Applies to:
`Inherited:
`
`none ~ inline (block ~ inline-block ~ list-item ~ xun-in 1 table ~
`inline-table table-row-group table-header-group
`table-footex-group ~ table-row ~ table-column-group ~ fiable-column
`table-cell table-caption inherit
`in].ine
`all elements
`no
`
`Computed value: varies far floated, positioned, and root elements (see CSS2.1, section 9.7);
`otherwise, as specified
`Here we have two block elements (body and p) and an inline element (em). According
`to the XHTML specification, em can descend from p, but the reverse is not true. Typi-
`cally, the XHTML hierarchy works out such that inlines can descend from blocks,
`but not the other way around.
`CSS, on the other hand, has no such restrictions. You can leave the markup as it is
`but change the display roles of the two elements like this:
`p {display: inline;}
`em {display: block;}
`
`This would cause the elements to generate a block box inside an inline box. This is
`perfectly legal aid violates no specification. The only problem would be i£ you tried
`to reverse the nesting of the elements:
`<em><p>This is a paragraph improperly enclosed by an inline element.</p></em>
`No matter what you do to the display roles via CSS, this is not legal in XHTML.
`While changing the display roles, of elements can be useful in XHTML documents, it
`becomes downright critical for XML documents. An XML document is unlikely to
`have any inherent display roles, so it's up to the author to define them. For example,
`you might wonder how to lay out the following snippet of XML:
`<book>
`<maintitle>Cascading Style Sheets: The Definitive Guide</mazntitle>
`<subtitle>Second Edition</subtitle>
`<author>Eric A, Meyer</author>
`<publisher>0'Reilly and Associates</publisher>
`<pubdate>2oo4</pubdate>
`<isbn>blah6lahblah</isbn>
`</book>
`<book>
`<maintitle>CS52 Pocket Reference</maintitle>
`<author>Eric A. Meyer</author>
`<publisher>0'Reilly and Associates</publishex>
`<pubdate>2oo4</pubdate>
`<isbn>blahblahblah</isbn>
`</book>
`
`10 ~
`
`Chapter 1: CSS and Documents
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`015
`
`

`
`Since the default value of display is inline, the content would be rendered as inline
`text by default, as illustrated in Figure 1-2. This isn't a terribly useful display.
`
`i,'=asc.~~lui~ ~t~~1e ::;h~~ts: T'he I)Pfinitive Guide w~c~nd Eclit~crl Fazc A. I~,tl~y~r C7'F'_eill`~ Grncl Associates
`'~C~<t bl~lit~l~hblali ~'~ ~? Po~1~Gt FZet~rence Ei~iC A. Ivl~yer ~'RPill~, mid Assc~ci~t~s '?~~~ 1,1~it,laht~lti~lz
`
`Figure 1-2. Default display of an XML document
`
`You can define the basics of the layout with display:
`
`book, maintitle, subtitle, author, isbn {display: block;}
`publisher, pubdate {display: inline;}
`You've now set five of the seven elements to be block and two to be inline. This
`means each of the block elements will be treated much as div is treated in XHTML,
`and the two inlines will be treated in a manner similar to span.
`
`This fundamental ability to affect display roles makes CSS highly useful in a variety
`of situations. You could take the preceding rules as a starting point, add a number of
`other styles, and get the result shown in Figure 1-3.
`
`+.~~~d.r~.~ _t.~le.._F~e_~et.~.;...The.....L~fr~~~►_~e.___u.cJ±~_.__....._. _...
`~~cc~YZtl E~~iti ~ti
`
`_......._.._...__.......
`
`Eric ~,. l~'Ieyei
`~~'It,Jil1,~ su~cl ~ss~ciat~s (~~a~)
`t'E7~tZ.~1k: ~L~Y~3 t)~CLt~'x
`
`+~~~__P'a~+ck~~ ~ef~r~rr~~e_
`
`_~__.~_._ _ ~____ __.
`
`__.
`
`__.~ . ~..
`
`~'I:ri11y ~iYd .t`~.s•~ari~tes ~2~04~
`1~I~~aLlcxr~a~ Fc~r'~
`
`Figure 1-3. Styled display of an XML document
`
`Throughout the rest of this book, we'll explore the various properties and values that
`allow presentation like this. First, though, we need to look at how one can associate
`CSS with a document. After all, without tying the two together, there's no way for
`the CSS to affect the document. We'll explore this in an XHTML setting since it's the
`most familiar to people.
`
`Bringing CSS and XHTML Together
`I've mentioned that HTML and XHTML documents have an inherent structure, and
`that's a point worth repeating. In fact, that's part of the problem with web pages of
`old: too many of us forgot that documents are supposed to have an internal struc-
`ture, which is altogether different than a visual structure. In our rush to create the
`coolest-looking pages on the Web, we bent, warped, and generally ignored the idea
`that pages should contain information that has some structural meaning.
`
`Bringing CSS and XHTML Together ~
`
`11
`
`WHATSAPP INC.'S EXHIBIT NO. 1008
`
`016
`
`

`
`That structure is an inherent part of the relationship between XHTML and CSS;
`without the structure, there couldn't be a relationship at all. In order to understand it
`better, let's look at an example XHTML document and break it down by pieces:
`
`<html>
`<head>
`<title>Eric's World of Waffles</title>
`clink ref="stylesheet" type="text/css" href="sheetl.css" media="all" />
`<style type="text/css">
`@import url(sheet2.css);
`h1 {color: maroon;}
`body {background: yellow;}
`/* These are my styles! Yay! */
`</style>
`</head>
`<body>
`<hvWaffles ! </h1>
`<p style="color: gray;">The most wonderful of all breakfast foods is
`the waffle--a ridged and cratered slab of home-cooked, fluffy goodness
`that makes every child's heart soar with joy. And they're so easy to make!
`lust a simple waffle-maker and some batter, and you're ready for a morning
`of aromatic ecstasy!
`</p>
`</body>
`</html>
`The above markup is shown in Figure 1-4.
`
`~'.
`~1~ 3'I2C'+t;~ `x.~irC>~t~:~~l~?Il O~ il~~ tilt-#~=~€~w`Lt.ST.. ~Cs4~u~r~ 1~; ~~St; ~vc3.~1r,;_--~ ~`<C~}:re~+"~ lk1G~ fI`~1~~'.1~v~ :~c9~:.~ r~~
`1"L S~`?;$1 ~i7S~31 1~:s~j. .f~-~Z;C# "~~?.i;;~~S'? ,;C~ Vii ;*"
`~a3i:l~lt:"<._~ C~c~~t.t't1., a~llP:~f ~"~J`~~?r':~:i ~11t1~ ¢aAc1i :~~5 %i~+~'1'v i.:~1i~C~`:> 3 ~
`~>> tYic