Why CSS?

Outline (Why CSS?)

Why CSS? [2]
How CSS Works [3]
CSS Strategies [1]
Properties [6]
1. CSS1 Properties [1]
2. CSS2 Properties [4]
Selectors [4]
1. CSS1 Selectors [1]
2. CSS2 Selectors [2]
CSS Mechanics [3]

Why CSS? D. Mahendran: 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? D. Mahendran: Cascading Style Sheets (CSS)

(5) What's Still 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
- form elements have special semantics (such as creating input fields)

Scripting [Scripting] can be used for implementing some of these issues
CSS is simply for more sophisticated styling of HTML pages

How CSS Works

Outline (How CSS Works)

Why CSS? [2]
How CSS Works [3]
CSS Strategies [1]
Properties [6]
1. CSS1 Properties [1]
2. CSS2 Properties [4]
Selectors [4]
1. CSS1 Selectors [1]
2. CSS2 Selectors [2]
CSS Mechanics [3]

How CSS Works D. Mahendran: Cascading Style Sheets (CSS)

(7) 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 D. Mahendran: Cascading Style Sheets (CSS)

(8) 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 D. Mahendran: Cascading Style Sheets (CSS)

(9) Formatting Model

Properties [Properties (1)] 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? [2]
How CSS Works [3]
CSS Strategies [1]
Properties [6]
1. CSS1 Properties [1]
2. CSS2 Properties [4]
Selectors [4]
1. CSS1 Selectors [1]
2. CSS2 Selectors [2]
CSS Mechanics [3]

CSS Strategies D. Mahendran: Cascading Style Sheets (CSS)

(11) Use Classes & Containers

CSS code should never show up in your HTML
Classes should reflect content or formatting
Containers [Advanced 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
Avoid redundant CSS code
- Whenever appropriate, inherit properties
- for invisible links use a { color : inherit ; }

Properties

Outline (Properties)

Why CSS? [2]
How CSS Works [3]
CSS Strategies [1]
Properties [6]
1. CSS1 Properties [1]
2. CSS2 Properties [4]
Selectors [4]
1. CSS1 Selectors [1]
2. CSS2 Selectors [2]
CSS Mechanics [3]

Properties D. Mahendran: Cascading Style Sheets (CSS)

(13) 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? [2]
How CSS Works [3]
CSS Strategies [1]
Properties [6]
1. CSS1 Properties [1]
2. CSS2 Properties [4]
Selectors [4]
1. CSS1 Selectors [1]
2. CSS2 Selectors [2]
CSS Mechanics [3]

CSS1 Properties D. Mahendran: Cascading Style Sheets (CSS)

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

Why CSS? [2]
How CSS Works [3]
CSS Strategies [1]
Properties [6]
1. CSS1 Properties [1]
2. CSS2 Properties [4]
Selectors [4]
1. CSS1 Selectors [1]
2. CSS2 Selectors [2]
CSS Mechanics [3]

CSS2 Properties D. Mahendran: Cascading Style Sheets (CSS)

(17) 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 [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 D. Mahendran: Cascading Style Sheets (CSS)

(18) 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 D. Mahendran: Cascading Style Sheets (CSS)

(19) 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 D. Mahendran: Cascading Style Sheets (CSS)

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

Why CSS? [2]
How CSS Works [3]
CSS Strategies [1]
Properties [6]
1. CSS1 Properties [1]
2. CSS2 Properties [4]
Selectors [4]
1. CSS1 Selectors [1]
2. CSS2 Selectors [2]
CSS Mechanics [3]

Selectors D. Mahendran: Cascading Style Sheets (CSS)

(22) 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? [2]
How CSS Works [3]
CSS Strategies [1]
Properties [6]
1. CSS1 Properties [1]
2. CSS2 Properties [4]
Selectors [4]
1. CSS1 Selectors [1]
2. CSS2 Selectors [2]
CSS Mechanics [3]

CSS1 Selectors D. Mahendran: Cascading Style Sheets (CSS)

(24) 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? [2]
How CSS Works [3]
CSS Strategies [1]
Properties [6]
1. CSS1 Properties [1]
2. CSS2 Properties [4]
Selectors [4]
1. CSS1 Selectors [1]
2. CSS2 Selectors [2]
CSS Mechanics [3]

CSS2 Selectors D. Mahendran: Cascading Style Sheets (CSS)

(26) More Selectors

CSS1 Selectors [CSS1 Selectors (1)] are available
- element name, id, class, and combinations of these
CSS2 adds 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 D. Mahendran: Cascading Style Sheets (CSS)

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

Why CSS? [2]
How CSS Works [3]
CSS Strategies [1]
Properties [6]
1. CSS1 Properties [1]
2. CSS2 Properties [4]
Selectors [4]
1. CSS1 Selectors [1]
2. CSS2 Selectors [2]
CSS Mechanics [3]

CSS Mechanics D. Mahendran: Cascading Style Sheets (CSS)

(29) 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 D. Mahendran: Cascading Style Sheets (CSS)

(30) 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 D. Mahendran: Cascading Style Sheets (CSS)

(31) 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 2011 — INFO 253 (CCN 42598)

Dilan MahendranUC Berkeley School of Information, UC Berkeley School of Information2011-09-08

Contents

(2) Abstract

Why CSS?

Outline (Why CSS?)

(4) Structure vs. Layout

(5) What's Still Missing?

How CSS Works

Outline (How CSS Works)

(7) CSS in Action

(8) HTML and CSS

(9) Formatting Model

CSS Strategies

Outline (CSS Strategies)

(11) Use Classes & Containers

Properties

Outline (Properties)

(13) Formatting Instructions

CSS1 Properties

Outline (CSS1 Properties)

(15) Factoring out HTML

CSS2 Properties

Outline (CSS2 Properties)

(17) CSS2

(18) Generated Content

(19) Tables

(20) Fixed vs. Automatic Table Layout

Selectors

Outline (Selectors)

(22) Select and Style

CSS1 Selectors

Outline (CSS1 Selectors)

(24) CSS for Dummies

CSS2 Selectors

Outline (CSS2 Selectors)

(26) More Selectors

(27) CSS2 Pseudo Classes

CSS Mechanics

Outline (CSS Mechanics)

(29) Cascading

(30) Inheritance

(31) Structuring Stylesheets

(32) CSS Conclusions

Web Architecture [./]
Fall 2011 — INFO 253 (CCN 42598)

Dilan MahendranUC Berkeley School of Information, UC Berkeley School of Information
2011-09-08