Cascading Style Sheets (CSS)

Web Architecture (INFO 290-03)

Erik Wilde, UC Berkeley School of Information
2008-10-14

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.


Why CSS?

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>naked.html (line 2-17)
<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>styled.xml (line 3-18)

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 ; }naked.css

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

How CSS Works

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>http://www.csszengarden.com/

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>css-usage.html (line 3-13)

Formatting Model


CSS Strategies

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


Properties

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


CSS1 Properties

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

  • CSS1 was published in 1996 and revised in 1999
  • HTML suffered from too many attributes
    • layout information was specified as CSS
    • style attributes in HTML were marked as deprecated
  • A small set of formatting features as CSS properties
    • font: p { font : 80% sans-serif }
    • color and background: body { background : url(logo.jpeg) right top }
    • text: h1 { text-transform : uppercase }
    • box: p.quote { border-style : solid dotted }
    • classification: img { display : none }

CSS2 Properties

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

  • CSS2 was published in 1998 and is still being revised (CSS2¹)
  • CSS2¹ is what you can expect from modern browsers
    • with IE (even IE7) being the exception
  • CSS2 is a single and coherent specification
    • CSS3 is a jungle of concurrent module development
    • CSS3 will never be finished (some modules will, though)

Generated Content

  • CSS1 had no way of adding information to the document
    • by using display, parts of the document could be ignored
  • Generated content allows content to come from the CSS
    • only possible with :before and :after pseudo-elements
    • static strings: p.abstract:before { content : "Abstract: " }
    • special effects like quotes: q:before { content : open-quote }
    • counters: h1:before { content: "Chapter " counter(chapter) ". " ; counter-increment : chapter }
  • Quotes can be defined as being language dependent
    • q:lang(en) { quotes : '"' '"' "'" "'" }
    • q:lang(no) { quotes : "«" "»" '"' '"' }

Tables

  • CSS1 does not address table formatting
    • table layout still had to be done using HTML attributes
    • a lot of redundant code specifying cell alignment and borders
  • CSS2 introduces tables on the CSS level
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

  • HTML defines a complex table rendering algorithm
    • tables are rendered incrementally
    • table layout is determined by looking at the complete table
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

CSS3 Properties

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

  • CSS3 is modularized and huge
  • Developments for different applications and scenarios
    • under construction for some time to come
    • implementations have to wait until the modules are more stable
  • CSS3 contains many powerful features
    • more powerful features mean a higher fall when fallback behavior occurs
    • CSS3 modules will probably undergo evolutionary selection and mutation

Multi-Column Layout

  • Most column-based layouts use tables
    • table columns are filled left-to-right, then top-to-bottom
    • multicolumns allow content to flow between columns
  • Multicolumn layouts are used in many Web pages
  • Publishing tools are good at hiding the table problems
<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>multicol.html (line 2-14)

Selectors

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


CSS1 Selectors

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

  • Very small set of selectors
    • selecting elements by name: h1 { font-size : large }
    • selecting elements by their id: #author { font-weight : bold }
    • selecting elements by their class: .abstract { font-size : small }
    • combining these mechanisms: p.warning { color : red }
  • Pseudo-classes and -elements allow interesting effects
    • a links have state: a:visited and a:active
    • selection without markup: p:first-letter and p:first-line

CSS2 Selectors

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

  • CSS1 Selectors are available
    • element name, id, class, and combinations of these
  • CSS2 introduced many new selectors
    • descendants: ul li { font : italic }
    • children: ul > li { font : italic }
    • adjacent siblings: h1 + h2 { margin-top : 0.5em }
    • attribute matching: h1[lang=nl] { color : orange }
  • CSS2 selectors are sufficient for most tasks
  • Setting class attributes is very important

CSS2 Pseudo Classes


CSS3 Selectors

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

  • CSS3 selectors introduce a wide array of new features
    • XPath is a very general selection mechanism
    • CSS3 re-invents some XPath features using new names
    • other selectors are based on dynamic information, which is more useful
  • Some ideas are very useful
    • highlighting targets: *:target { outline : red thin solid }
    • selection highlighting: *:selection { … }
    • (form) element states: input:disabled { … }
  • Adoption and demand for other selectors is unclear
    • attribute substrings: p[title*="hello"] { … }
    • counting children: p:nth-child(42) { … }

CSS Mechanics

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


Conclusions

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