Cascading Style Sheets (CSS)

XML Foundations (INFOSYS 242)

Erik Wilde, UC Berkeley iSchool
Tuesday, September 12, 2006
Creative Commons License

This work is licensed under a Creative Commons
Attribution-NonCommercial-ShareAlike 2.5 License.

Abstract

Cascading Stylesheets (CSS) have been designed as a language for better separating presentation-specific issues from the structuring of documents as provided by HTML. However, CSS can be applied to XML as well, either directly (by applying a CSS stylesheet to an XML document), or as an supplement to basic HTML layout structures generated from an XML document. CSS uses a simple model of selectors and declarations. Selectors specify to which elements of a document a set of declarations (each being a value assigned to a property) apply; in addition there is a model of how property values are inherited and cascaded. The biggest limitation of CSS is that it cannot change the structure of the displayed document.

Outline (Why CSS?)

  1. Why CSS? [4]
  2. How CSS Works [4]
  3. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  4. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  5. CSS Mechanics [3]
  6. Conclusions [1]

Structure vs. Layout

HTML vs. XML

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Naked HTML</title>
 </head>
 <body>
  <p>some text in a paragraph..</p>
  <ol>
   <li>an ordered list's first item</li>
   <li>and the second one</li>
  </ol>
  <table>
    <tr><td>row 1, column 1</td><td>row 2, second column</td></tr>
    <tr><td>another row, first column</td><td>the last table cell</td></tr>
  </table>
 </body>
</html>
<peter>
 <paul>
  <mary>Naked HTML</mary>
 </paul>
 <bob>
  <bill>some text in a paragraph..</bill>
  <george>
   <hillary>an ordered list's first item</hillary>
   <hillary>and the second one</hillary>
  </george>
  <jim>
    <joe><jill>row 1, column 1</jill><jill>row 2, second column</jill></joe>
    <joe><jill>another row, first column</jill><jill>the last table cell</jill></joe>
  </jim>
 </bob>
</peter>

HTML vs. XML

peter { margin : 10px ; }
paul { display : none ; }
bill { display : block ; }
george { counter-reset : hillary ; margin : 5px ; } 
hillary { display: block ; }
hillary:before { content : counter(hillary) ". " ; counter-increment : hillary ; }
jim { display : table ; }
joe { display : table-row ; }
jill { display : table-cell ; }

What's Missing?

  1. Restructuring content
    • CSS assigns formatting properties to elements
    • the document tree which is formatted cannot be restructured
    • parts can be ignored or new parts can be inserted
  2. Interpreting content
    • img has a lot of special meanings attached
    • all form elements have very special semantics

Outline (How CSS Works)

  1. Why CSS? [4]
  2. How CSS Works [4]
  3. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  4. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  5. CSS Mechanics [3]
  6. Conclusions [1]

CSS in Action

<body id="css-zen-garden">
<div id="container">
 <div id="intro">
  <div id="pageHeader">
   <h1><span>css Zen Garden</span></h1>
   <h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>
  </div>
  <div id="quickSummary">
   <p class="p1"><span>A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the list to load it into this page.</span></p>
   <p class="p2"><span>Download the sample <a href="/zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a></span></p>
  </div>
  <div id="preamble">
   <h3><span>The Road to Enlightenment</span></h3>
   <p class="p1"><span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym title="Cascading Style Sheets">CSS</acronym> support.</span></p>

HTML and CSS

 <head>
  <title>CSS Usage</title>
  <link rel="stylesheet" href="http://dret.net/dretnet.css" type="text/css"/>
  <style type="text/css"> li { color : red } </style>
 </head>
 <body>
  <p>some text in a paragraph..</p>
  <ol>
   <li>an ordered list's first item</li>
   <li style=" text-decoration : underline ">and the second one</li>
  </ol>

XML and CSS

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="naked.css" type="text/css"?>
<peter>
 <paul>
  <mary>Naked HTML</mary>
peter { margin : 10px ; }
paul { display : none ; }

Formatting Model

Outline (Properties)

  1. Why CSS? [4]
  2. How CSS Works [4]
  3. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  4. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  5. CSS Mechanics [3]
  6. Conclusions [1]

Formatting Instructions

Outline (CSS1 Properties)

  1. Why CSS? [4]
  2. How CSS Works [4]
  3. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  4. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  5. CSS Mechanics [3]
  6. Conclusions [1]

Factoring out HTML

Outline (CSS2 Properties)

  1. Why CSS? [4]
  2. How CSS Works [4]
  3. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  4. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  5. CSS Mechanics [3]
  6. Conclusions [1]

CSS2

Generated Content

Tables

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption }

Fixed vs. Automatic Table Layout

Automatic Fixed
col 1 row 1 col 2 row 1 col 2 row 1 col 3 row 1 col 3 row 1 col 3 row 1
col 1 row 2 col 2 row 2 col 2 row 2 col 3 row 2 col 3 row 2 col 3 row 2
col 1 row 1 col 2 row 1 col 2 row 1 col 3 row 1 col 3 row 1 col 3 row 1
col 1 row 2 col 2 row 2 col 2 row 2 col 3 row 2 col 3 row 2 col 3 row 2

Outline (CSS3 Properties)

  1. Why CSS? [4]
  2. How CSS Works [4]
  3. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  4. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  5. CSS Mechanics [3]
  6. Conclusions [1]

CSS3

Multi-Column Layout

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Multicolumn Layout in HTML</title>
  <style type="text/css">
.multicol { -moz-column-count : 4 ; -moz-column-gap: 3% ; }
h2 { -moz-column-break-before: always ; -moz-column-break-after: avoid ; }
h3 { -moz-column-break-after: avoid ; }
  </style>
 </head>
 <body>
  <h1>Multicolumn Layout in HTML</h1>
  <div class="multicol">
   <h2>Multicol Title</h2>

Outline (Selectors)

  1. Why CSS? [4]
  2. How CSS Works [4]
  3. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  4. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  5. CSS Mechanics [3]
  6. Conclusions [1]

Select and Style

Outline (CSS1 Selectors)

  1. Why CSS? [4]
  2. How CSS Works [4]
  3. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  4. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  5. CSS Mechanics [3]
  6. Conclusions [1]

CSS for Dummies

Outline (CSS2 Selectors)

  1. Why CSS? [4]
  2. How CSS Works [4]
  3. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  4. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  5. CSS Mechanics [3]
  6. Conclusions [1]

More Selectors

CSS2 Pseudo Classes

Outline (CSS3 Selectors)

  1. Why CSS? [4]
  2. How CSS Works [4]
  3. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  4. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  5. CSS Mechanics [3]
  6. Conclusions [1]

CSS goes XPath

Outline (CSS Mechanics)

  1. Why CSS? [4]
  2. How CSS Works [4]
  3. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  4. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  5. CSS Mechanics [3]
  6. Conclusions [1]

Cascading

Inheritance

Structuring Stylesheets

Outline (Conclusions)

  1. Why CSS? [4]
  2. How CSS Works [4]
  3. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  4. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  5. CSS Mechanics [3]
  6. Conclusions [1]

CSS for Document Styling