In Fall Quarter 2001 we are "accelerating" coverage of this topic. Please see Chapters 13 - 15 in your book, and use the files below to learn the details of using Cascading Style Sheets (CSS) in rendering XML document. Please see the example files in the css directory. Assignment 1 requires a .xml, .dtd, and .css "mini project".
CSS - PPT lecture
Note that the examples in these chapters are almost all based on the panthers.xml and panthersblurb.xml files. I have created a separate xml file for each example that references the proper CSS stylesheet, but unless noted, all the XML files are otherwise identical. The CSS files build on each other gradually.
The files in this section are in the css folder.
| Page | Section | Code |
|---|---|---|
| 177 | Setting up CSS |
Figure 13.1: panthers.xml |
| 178 | CSS with XML vs. CSS with HTML | Figure 13.3: panthers.xml Figure 13.4: panthers.html |
| 180-181 | Specifying Where Styles Are To Be Applied |
Figure 13.6: where1.css Figure 13.7: where2.css |
| 182-183 | Creating an External Style Sheet | external.css |
| 184-185 | Calling a Style Sheet for an XML Document |
Figure 13.11: call_stylesheet.xml (end_species.css) Figure 13.12: call_stylesheet_xml.xsl is the document shown. It is used to transform panthers.xml into call_stylesheet_xml.xml which calls end_species.css for formatting information. |
| 186 | Calling a Style Sheet for an HTML Document | callstyles_html.xsl, (tigers_rhinos.xml, callstyles_html.html, callstyles.css) |
| 187 | Using Internal Style Sheets | callstyles_html_internal.xsl |
| 188 | Applying Styles Locally | local_styles.xsl (local_styles.html) |
The files in this section are in the css_layout folder. The XML files formatted by the CSS examples on pages 190-197 are identical to panthers.xml, except for the call to the individual stylesheet. The XML files used from pages 198-205 are identical to panthersblurb.xml--except for the call to the individual stylesheet--(which only differs from panthers.xml in the addition of an extra sidebar (blurb) paragraph.) Finally, the examples in the last two sections (pages 206-9) are identical to the pantherlist.xml file--again, except for the call to the individual stylesheet.
| Page | Section | Code |
|---|---|---|
| 190 | Defining Elements as Block-Level or Inline | |
| 191 | Hiding Elements Completely | hide.css (hide.xml) |
| 192 | Offsetting Elements In the Natural Flow | relative.css (relative.xml) |
| 193 | Positioning Elements Absolutely | absolute.css (absolute.xml) |
| 194 | Setting the Height or Width for an Element | heightwidth.css (heightwidth.xml) |
| 195 | Setting the Border | border.css (border.xml) |
| 196 | Adding Padding Around an Element | padding.css (padding.xml) |
| 197 | Setting the Margins around an Element | margin.css (margin.xml) |
| 198 | Wrapping Text around Elements | float.css (float.xml) |
| 199 | Stopping Text Wrap | clear.css (clear.xml) |
| 200 | Changing the Foreground Color | foreground.css (foreground.xml) |
| 201 | Changing the Background | background.css (background.xml) |
| 202 | Positioning Elements in 3D | zindex.css (zindex.xml) |
| 203 | Aligning Elements Vertically | verticalalign.css (verticalalign.xml) |
| 204 | Determining Where Overflow Should Go | overflow.css (overflow.xml) |
| 205 | Clipping an Element | clip.css (clip.xml) |
| 206-207 | Setting List Properties | lists.css (pantherlist.xml) |
| 208 | Specifying Page Breaks | pagebreak.css (pagebreak.xml) |
The files in this section are in the css_text folder. All of the XML files are identical to panthers_layout.xml, except for the call to the individual stylesheet. Indeed panthers_layout.xml is simply the same panthersblurb.xml file we saw in the last chapter with a call to the layout.css stylesheet which includes all the layout information we added in Chapter 14. Note also that you'll need the embedded font files for all the examples from page 211 on, and that the embedded fonts will only be visible in IE5 for Windows.
| Page | Section | Code |
|---|---|---|
| 210 | Choosing a Font Family | |
| 211 | Embedding Fonts on a Page | embedfonts.css (embedfonts.xml) |
| 212 | Creating Italics | italic.css (italic.xml) |
| 213 | Applying Bold Formatting | bold.css (bold.xml) |
| 214 | Setting the Font Size | font-size.css (font-size.xml) |
| 215 | Setting the Line Height | line-height.css (line-height.xml) |
| 216 | Setting All Font Values at Once | font.css (font.xml) |
| 217 | Setting the Text Color | color.css (color.xml) |
| 218 | Changing the Text's Background | background.css (background.xml) |
| 219 | Controlling Spacing | spacing.css (spacing.xml) |
| 220 | Aligning Text | text-align.css (text-align.xml) |
| 221 | Underlining Text | underline.css (underline.xml) |
| 222 | Changing the Text Case | transform.css (transform.xml) |
Click here to return to the course outline.
Last revision September 10, 2001
http://www.informaticus.org/COIN78/week9/index.htm
