Cascading Stylesheets (CSS)

Information Systems and the World Wide Web

International School of New Media
University of Lübeck

Erik Wilde, UC Berkeley School of Information
2007-01-03
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

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