Cascading Style Sheets (CSS)

Web Architecture (INFO 290-03)

Erik Wilde, UC Berkeley School of Information
2007-10-04
Creative Commons License

This work is licensed under a CC
Attribution 3.0 Unported 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. 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 [3]
  3. CSS Strategies [2]
  4. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  5. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  6. CSS Mechanics [3]
  7. 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 [3]
  3. CSS Strategies [2]
  4. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  5. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  6. CSS Mechanics [3]
  7. 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>

Formatting Model

Outline (CSS Strategies)

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

Use Classes & Containers

Avoid Redundant CSS Code

Outline (Properties)

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

Formatting Instructions

Outline (CSS1 Properties)

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

Factoring out HTML

Outline (CSS2 Properties)

  1. Why CSS? [4]
  2. How CSS Works [3]
  3. CSS Strategies [2]
  4. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  5. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  6. CSS Mechanics [3]
  7. 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 [3]
  3. CSS Strategies [2]
  4. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  5. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  6. CSS Mechanics [3]
  7. 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 [3]
  3. CSS Strategies [2]
  4. Properties [8]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
    3. CSS3 Properties [2]
  5. Selectors [5]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
    3. CSS3 Selectors [1]
  6. CSS Mechanics [3]
  7. Conclusions [1]

Select and Style

Outline (CSS1 Selectors)

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

CSS for Dummies

Outline (CSS2 Selectors)

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

More Selectors

CSS2 Pseudo Classes

Outline (CSS3 Selectors)

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

CSS goes XPath

Outline (CSS Mechanics)

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

Cascading

Inheritance

Structuring Stylesheets

Outline (Conclusions)

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

CSS for Document Styling