1. XML FOR DUMMIES Book author: Lucinda Dykes and Ed Tittel Slides Prepared by Cong Tan Part 2 : XML and The Web Chapter 7: Handling Formatting with CSS.

2. Contents Viewing XML on the Web with CSS. Basic CSS Formatting : CSS1. The Icing on the Cake: CSS2. Building a CSS Stylesheet. Adding CSS to XML. Adding CSS to XSLT.

3. 1. Viewing XML on the Web with CSS. If you want to see how a CSS document can affect the look and feel of a Web page, visit Dave Shea’s CSS Zen Garden page ,at www.csszengarden.com , also shown in Figure 7-1. The CSS Zen Garden beautiful demonstrates the power of CSS. Building a good stylesheet is a much easier approach, because it’s design to drive complex display. You will be using the right tool for the right job.

5. 1. Viewing XML on the Web with CSS(cont…). CSS is ready, ready easy to use with XML. Figure 7-2 shows how the bookstore XML file looks with the addition of a difference CSS stylesheet to display our book information. CSS document are just plain text , you want to use CSS with XML, you must to learn CSS , its syntax.

6. 2. Basic CSS Formatting: CSS1. CSS1 was the first version of CSS developed for use with HTML. Partial suppose for CSS1 in Web browser start with IE 3.0 and Netscape Navigator 4.o. The newer version suppose all elements in CSS1. With CSS1, you can control the format display of: Colors and backgrounds Fonts and text Lists Margins, padding , and borders

7. 3. The Icing on the Cake: CSS2. CSS2 was published as a W3C recommendation in 1998. IE and Netscape Navigator , version 6 and later suppose almost all of the CSS2 specification. Additions to CSS1 in CSS2 include the following: Element positioning Element visibility Support for specifying page breaks Table styles Aural stylesheets Support for system colors and fonts Counters and automatic numbering.

8. 4. Building a CSS Stylesheet. The primary focus is understanding and using CSS markup, and understanding its capabilities and limitations. You must also understand that not all Web browsers treat CSS definitions exactly the same, so experimentation and testing to achieve the right look may be require. Cascading refers to the capability of applying multiple stylesheet to any document. There three stylesheet cascade —are applied in order —to the Web page according to the following priority order: 1. User-defined stylesheets(a specific stylesheet created for the user). 2. Inline styles 3. Embedded styles 4. External stylesheets. 5. The user’s preferences 6. The browser’s default stylesheet.

9. 5. Adding CSS to XML. Best to begin with basics —the XML to which we’ll be adding a CSS stylesheet. Listing 7-1 shows our books XML file —which includes only book information.

11. 5. Adding CSS to XML(cont…). This document includes the following elements. <book> holds everything in the document . <book> data should be separated for each book so it’s easy to read on-screen. <title> should be emphasized with a lager font and a different color background so that each book is easy to locate on the page. <author>, <publisher>, <price>, <contentType>, <format>, and <isbn> work well together and should be displayed in a similar style on separate lines.

12. 5.1 A simple CSS stylesheet for XML. Listing 7-2 shows a simple CSS stylesheet for our book XML file.

13. 5.2 Dissecting a simple CSS stylesheet. A stylesheet is nothing more than a collection of style rules that tells the computer how to format of the various elements is an XML document when it puts them on-screen. All style rules use the same syntax, so even if you’ve never seen a CSS stylesheet, you can probably guess how to build a basic style rule.

14. 5.2.1 The magic formula for building CSS style rules. CSS stylesheetsconsit of style rules called statements. A statement is made up of a selector that specifies which elements the statement applies to and a declaration that specifies which style properties to apply. The declaration includes a style properly name and value. The syntax looks like this: Here’s an example of a CSS statement form the book.css stylesheet. Books is the selector, and the declaration includes background-color, a formatting property, and gray, the value of this formatting property. selector {declaration} books { background-color: gray;}

15. 5.2.1 The magic formula for building CSS style rules(cont…). Some of the declarations from our booksstylesheet include these: {backgroud-repeat: no-repeat; background-position: 80% 10px;} {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;} {margin-bottom: 20px; margin-top: 15px;} {padding: 2px;} All specific CSS properties —and the values they can take —are predefined in the CSS1 and CSS2 specifications. The hardest part of learning CSS is remembering specific property names and their values.

16. 5.2.2 Combining declarations. You can combine declarations in a style rule to include a collection of property and value combinations in a single selector. Syntax: property: value We did in most of our style rule, including this one: title { display:block; color: Maroon; font-size: medium; }

17. 5.2.3 Efficiency is good: Combining selectors and declarations. You can combining selectors. Simply list all your selectors separated by commas, as in: Our sample stylesheet combines selectors this way in a style rule: selector, selector . . . {declaration} author, publisher, price, contentType, format, isbn { display: block; background-color: #ffe4c4; font-size: x-small; padding: 2px; }

18. 5.2.4 Variations on the magic: Selector specifications. You can also apply specific styles when elements occur in a particular order. For example, you could create a style that applies to the dog element only when it follows the cat element. To do this just add a space between element names and use them both as the selector, like so: That space between the element names tells the application processing the stylesheet to look for cat tags followed by dog tags. You can link selectors to different elements based on attribute values, context, type, parent–child relationships, and a variety of other options. cat dog {color: teal}

19. 5.2.5 Punctuating CSS rules.

20. 5.3 Linking CSS and XML. After you’ve built some stylesheets, the next step is to use them with XML. This process is pretty easy, but the met method varies between XML and XHTML. To reference a CSS stylesheet in an XML document, use a processing instruction that takes this format: For books.xml, we added this processing instruction as the line following the XML declaration: To reference a CSS stylesheet in an HTML or an XHTML document, use a link element that takes this fotmat: <?xml-stylesheethref=”url” type=”text/css”?> <?xml-stylesheet type=”text/css” href=”books.css”?> <link href=”url” rel=”stylesheet” type=”text/css”>

21. 6. Adding CSS to XSLT. CSS and XSL(including XSLT and XSL-FO) are completing technologies doesn’t mean you have to choose one or the other to use forevermore. CSS and XSL play well together. XSL has two primary purpose: as XSL-FO, to apply style to XML document, and as XSLT. Many XML developers use the transformation side of XSL — XSLT —to transform