Why CSS?

Outline (Why CSS?)

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

Why CSS? E. Wilde: Cascading Style Sheets (CSS)

(4) Structure vs. Layout

HTML started as very simple layout-oriented structures
- more layout control was introduced as attributes (align, color)
- HTML became increasingly polluted by layout information
CSS was introduced as a format for layout information
- the HTML can be kept simple, containing only the structures
- layout information can be reused by using separate CSS files
CSS has been designed for HTML
- it has been generalized to also cover XML
- the HTML heritage is still very visible in CSS

Why CSS? E. Wilde: Cascading Style Sheets (CSS)

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

Why CSS? E. Wilde: Cascading Style Sheets (CSS)

(6) HTML vs. XML

HTML's built-in formatting rules can be expressed by CSS
- CSS has been extended to cover all HTML formatting
- any element can be defined to be formatted like an HTML element

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

Why CSS? E. Wilde: Cascading Style Sheets (CSS)

(7) What's Missing?

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
Interpreting content
- img has a lot of special meanings attached
- all form elements have very special semantics

How CSS Works

Outline (How CSS Works)

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

How CSS Works E. Wilde: Cascading Style Sheets (CSS)

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

zengarden.html (line 17-30)

How CSS Works E. Wilde: Cascading Style Sheets (CSS)

(10) HTML and CSS

CSS specifies how HTML elements are formatted
1. formatting can be attached to every element (redundant inside document)
2. formatting can be included in document (redundant across documents)
3. separate CSS files describe the formatting (best reuse)
Any combination of these methods is possible

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

How CSS Works E. Wilde: Cascading Style Sheets (CSS)

(11) Formatting Model

Properties are central to the CSS formatting model
1. create a document tree
2. identify the media type (e.g., screen or print)
3. retrieve all stylesheets required for the media type
4. assign values to all properties in the document tree
5. generate a formatting structure (a different tree)
6. render the formatting structure on the target medium
Properties control the rendering of elements
Styling in CSS means assigning values to properties

CSS Strategies

Outline (CSS Strategies)

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

CSS Strategies E. Wilde: Cascading Style Sheets (CSS)

(13) Use Classes & Containers

CSS code should never show up in your HTML
Classes should reflect content or formatting
Containers [Hypertext Markup Language (HTML); All-Purpose Elements (1)] can restrict styles to a context
Context can be nested
- orthogonal concepts should be represented as nested classes
- for example, pages for staff and faculty and current and past as classification
- different levels of formatting sophistication can be implemented with CSS only

CSS Strategies E. Wilde: Cascading Style Sheets (CSS)

(14) Avoid Redundant CSS Code

Whenever appropriate, inherit properties
- for invisible links use a { color : inherit ; }
Use various rules for various levels of style sophistication

Properties

Outline (Properties)

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

Properties E. Wilde: Cascading Style Sheets (CSS)

(16) Formatting Instructions

Properties define how elements are formatted
- they define a specific facet of formatting
- they may have interdependencies with other properties
- they can be assigned explicitly
- they may be defined through Cascading [Cascading (1)] or Inheritance [Inheritance (1)]
A property has a name and is used in a name/value-pair
- the name identifies the property that is being set
- the value space depends on the property
- some properties accept complex values
- sets of values: p { font : bold italic large Palatino }
- sequences of values: p { font-family : "Segoe UI", verdana, helvetica, arial, sans-serif }
Property specifications can be grouped
- .thinboxed { border-width : 1px ; padding : 10px ; margin : 5px }

CSS1 Properties

Outline (CSS1 Properties)

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

CSS1 Properties E. Wilde: Cascading Style Sheets (CSS)

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

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

CSS2 Properties E. Wilde: Cascading Style Sheets (CSS)

(20) CSS2

CSS2 was published in 1998 [http://www.w3.org/TR/1998/REC-CSS2-19980512/] and is still being revised (CSS2¹) [http://www.w3.org/TR/CSS21/]
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)

CSS2 Properties E. Wilde: Cascading Style Sheets (CSS)

(21) 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 : "«" "»" '"' '"' }

CSS2 Properties E. Wilde: Cascading Style Sheets (CSS)

(22) 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 E. Wilde: Cascading Style Sheets (CSS)

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

Clipping of contents allows more freedom
- HTML tables are designed to show everything
- many applications work better when table contents are clipped [http://dret.net/glossary/xml]

CSS3 Properties

Outline (CSS3 Properties)

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

CSS3 Properties E. Wilde: Cascading Style Sheets (CSS)

(25) CSS3

CSS3 is modularized and huge
Developments for different applications and scenarios
- under construction [http://www.w3.org/Style/CSS/current-work] 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

CSS3 Properties E. Wilde: Cascading Style Sheets (CSS)

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

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

Selectors E. Wilde: Cascading Style Sheets (CSS)

(28) Select and Style

Properties [Properties (1)] are applied to elements
- properties can be directly applied in an element's style attribute
- in all other cases, selectors are used to select the styled elements
Selectors are good for reusable CSS code
- identifying the most appropriate formatting classes is not easy
- planning for CSS for a larger site is a difficult task
CSS project management should separate selectors and properties
1. selectors are about which things should be identified and styled
2. properties are about how this styling is implemented

CSS1 Selectors

Outline (CSS1 Selectors)

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

CSS1 Selectors E. Wilde: Cascading Style Sheets (CSS)

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

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

CSS2 Selectors E. Wilde: Cascading Style Sheets (CSS)

(32) 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 E. Wilde: Cascading Style Sheets (CSS)

(33) 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 }
Support for Internationalization (I18N) & Localization (L10N) [Internationalization (I18N) & Localization (L10N)]

CSS3 Selectors

Outline (CSS3 Selectors)

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

CSS3 Selectors E. Wilde: Cascading Style Sheets (CSS)

(35) CSS goes XPath

CSS3 selectors introduce a wide array of new features
- XPath [../xml-fall08/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 [http://dret.net/netdret/publications#wil98]: *: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)

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

CSS Mechanics E. Wilde: Cascading Style Sheets (CSS)

(37) Cascading

Stylesheets may have three different origins
1. page authors associate CSS with their pages
2. users configure their browser to use some CSS
3. user agents (browsers) have built-in CSS how to style content
Conflicts must be resolved using the following algorithm
1. find all matching declarations (matching media type and selector)
2. sort according to importance (browser < user < author)
3. same importance must be sorted by specificity (more specific selectors)
4. finally, sort by order in which they were specified
!important rules can influence the algorithm
- they are interpreted in step 2 (sorting by importance)
- browser < user < author < author(important) < user(important)

CSS Mechanics E. Wilde: Cascading Style Sheets (CSS)

(38) Inheritance

Properties often are inherited by children
- setting a table's color sets the color for all contents
- without inheritance, CSS stylesheets would have to be very large
Inheritance is mostly intuitive
- in reality, it is a bit more complicated
1. specified value: what the property specified (Cascading [Cascading (1)], inheritance, or initial)
2. computed value: computed based on the environment (e.g., ex → px)
3. used value: converted to an absolute value (e.g., percentage widths)
4. actual value: specific for the environment (e.g., borders with pixel fractions)

CSS Mechanics E. Wilde: Cascading Style Sheets (CSS)

(39) Structuring Stylesheets

Stylesheets may need to be structured
- importing CSS code is supported: @import "/dretnet.css" ;
- modules of CSS code can be reused in different contexts
Stylesheets may be specific for a media type
- braille, embossed, handheld, print, projection, screen, speech, tty, tv
- specified in HTML: link rel="stylesheet" type="text/css" media="print" href="/print.css"
- specified in CSS: @media print { … }
- media-dependent import: @import "/print.css" print ;

Cascading Style Sheets (CSS)

Web Architecture [./]Fall 2008 — INFO 290-03 (CCN 42584)

Erik WildeUC Berkeley School of Information, UC Berkeley School of Information2008-10-14

Contents

(2) Abstract

Why CSS?

Outline (Why CSS?)

(4) Structure vs. Layout

(5) HTML vs. XML

(6) HTML vs. XML

(7) What's Missing?

How CSS Works

Outline (How CSS Works)

(9) CSS in Action

(10) HTML and CSS

(11) Formatting Model

CSS Strategies

Outline (CSS Strategies)

(13) Use Classes & Containers

(14) Avoid Redundant CSS Code

Properties

Outline (Properties)

(16) Formatting Instructions

CSS1 Properties

Outline (CSS1 Properties)

(18) Factoring out HTML

CSS2 Properties

Outline (CSS2 Properties)

(20) CSS2

(21) Generated Content

(22) Tables

(23) Fixed vs. Automatic Table Layout

CSS3 Properties

Outline (CSS3 Properties)

(25) CSS3

(26) Multi-Column Layout

Selectors

Outline (Selectors)

(28) Select and Style

CSS1 Selectors

Outline (CSS1 Selectors)

(30) CSS for Dummies

CSS2 Selectors

Outline (CSS2 Selectors)

(32) More Selectors

(33) CSS2 Pseudo Classes

CSS3 Selectors

Outline (CSS3 Selectors)

(35) CSS goes XPath

CSS Mechanics

Outline (CSS Mechanics)

(37) Cascading

(38) Inheritance

(39) Structuring Stylesheets

Conclusions

Outline (Conclusions)

(41) CSS for Document Styling

Web Architecture [./]
Fall 2008 — INFO 290-03 (CCN 42584)

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