Cascading Style Sheets (CSS)

Web Architecture and Information Management [./]
Spring 2011 — INFO 153 (CCN 42509)

Erik Wilde and Dilan Mahendran, UC Berkeley School of Information
2011-02-07

Creative Commons License [http://creativecommons.org/licenses/by/3.0/]

This work is licensed under a CC
Attribution 3.0 Unported License [http://creativecommons.org/licenses/by/3.0/]

Contents Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

Contents

Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(2) 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? [1]
  2. How CSS Works [3]
  3. CSS Strategies [1]
  4. Properties [6]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
  5. Selectors [4]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
  6. CSS Mechanics [3]
Why CSS? Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(4) Structure vs. Layout



How CSS Works

Outline (How CSS Works)

  1. Why CSS? [1]
  2. How CSS Works [3]
  3. CSS Strategies [1]
  4. Properties [6]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
  5. Selectors [4]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
  6. CSS Mechanics [3]
How CSS Works Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(6) 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>


How CSS Works Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(7) 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>


How CSS Works Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(8) Formatting Model



CSS Strategies

Outline (CSS Strategies)

  1. Why CSS? [1]
  2. How CSS Works [3]
  3. CSS Strategies [1]
  4. Properties [6]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
  5. Selectors [4]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
  6. CSS Mechanics [3]
CSS Strategies Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(10) Use Classes & Containers



Properties

Outline (Properties)

  1. Why CSS? [1]
  2. How CSS Works [3]
  3. CSS Strategies [1]
  4. Properties [6]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
  5. Selectors [4]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
  6. CSS Mechanics [3]
Properties Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(12) Formatting Instructions



CSS1 Properties

Outline (CSS1 Properties)

  1. Why CSS? [1]
  2. How CSS Works [3]
  3. CSS Strategies [1]
  4. Properties [6]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
  5. Selectors [4]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
  6. CSS Mechanics [3]
CSS1 Properties Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(14) Factoring out HTML

  • CSS1 was published in 1996 [http://www.w3.org/TR/REC-CSS1-961217] and revised in 1999 [http://www.w3.org/TR/1999/REC-CSS1-19990111]
  • 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 [http://www.w3.org/TR/REC-CSS1/#font-properties]: p { font : 80% sans-serif }
    • color and background [http://www.w3.org/TR/REC-CSS1/#color-and-background-properties]: body { background : url(logo.jpeg) right top }
    • text [http://www.w3.org/TR/REC-CSS1/#text-properties]: h1 { text-transform : uppercase }
    • box [http://www.w3.org/TR/REC-CSS1/#box-properties]: p.quote { border-style : solid dotted }
    • classification [http://www.w3.org/TR/REC-CSS1/#classification-properties]: img { display : none }


CSS2 Properties

Outline (CSS2 Properties)

  1. Why CSS? [1]
  2. How CSS Works [3]
  3. CSS Strategies [1]
  4. Properties [6]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
  5. Selectors [4]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
  6. CSS Mechanics [3]
CSS2 Properties Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(16) CSS2

  • CSS2 was published in 1998 [http://www.w3.org/TR/1998/REC-CSS2-19980512/] and is still being revised (CSS21) [http://www.w3.org/TR/CSS21/]
  • CSS21 is what you can expect from modern browsers
    • with IE (even IE7) being the exception
  • CSS2 is a single and coherent specification
    • CSS3 [http://www.w3.org/TR/css3-roadmap/] is a jungle of concurrent module development
    • CSS3 will never be finished (some modules will, though)


CSS2 Properties Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(17) Generated Content

  • CSS1 had no way of adding information to the document
    • by using display, parts of the document could be ignored
  • Generated content [http://www.w3.org/TR/CSS21/generate.html] 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 : "«" "»" '"' '"' }


CSS2 Properties Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(18) 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 }


CSS2 Properties Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(19) 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


Selectors

Outline (Selectors)

  1. Why CSS? [1]
  2. How CSS Works [3]
  3. CSS Strategies [1]
  4. Properties [6]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
  5. Selectors [4]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
  6. CSS Mechanics [3]
Selectors Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(21) Select and Style



CSS1 Selectors

Outline (CSS1 Selectors)

  1. Why CSS? [1]
  2. How CSS Works [3]
  3. CSS Strategies [1]
  4. Properties [6]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
  5. Selectors [4]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
  6. CSS Mechanics [3]
CSS1 Selectors Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(23) 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? [1]
  2. How CSS Works [3]
  3. CSS Strategies [1]
  4. Properties [6]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
  5. Selectors [4]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
  6. CSS Mechanics [3]
CSS2 Selectors Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(25) More Selectors

  • CSS1 Selectors [CSS1 Selectors (1)] 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 Selectors Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(26) CSS2 Pseudo Classes

  • CSS1's pseudo-elements [CSS1 Selectors (1)] are available
    • link states and first letter and line of content
  • CSS2 adds more qualifications for elements
    • first child: p:first-child { text-indent : 0 }
    • dynamic behavior: a:hover { … } a:active { … } a:focus { … }
    • language: :lang(de) { quotes: '»' '«' '‹' '›' }
    • Generated Content [Generated Content (1)]: q:before { content : open-quote } q:after { content : close-quote }


CSS Mechanics

Outline (CSS Mechanics)

  1. Why CSS? [1]
  2. How CSS Works [3]
  3. CSS Strategies [1]
  4. Properties [6]
    1. CSS1 Properties [1]
    2. CSS2 Properties [4]
  5. Selectors [4]
    1. CSS1 Selectors [1]
    2. CSS2 Selectors [2]
  6. CSS Mechanics [3]
CSS Mechanics Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(28) Cascading



CSS Mechanics Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(29) Inheritance



CSS Mechanics Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(30) Structuring Stylesheets



Erik Wilde and Dilan Mahendran: Cascading Style Sheets (CSS)

(31) CSS Conclusions



2011-02-07 Web Architecture and Information Management [./]
Spring 2011 — INFO 153 (CCN 42509)