1. Cascading Style Sheets
A presentation by Ray James
for INF385E Information Architecture And Design
Dr. Don Turnbull
Nov. 15, 2005

2. Presentation Outline CSS basics & background
CSS demonstration, uses, applications & tips
Issues and limitations
Questions & comments
Nov. 15, 2005

3. Basics & Background of CSS
What is a cascading style sheet?
What can one do with them?
Who created the concept?
Who guides and maintains CSS?
Nov. 15, 2005

4. CSS: basics
CSS (acronym for Cascading Style Sheet) is style sheet language used to describe the presentation of a document written in a markup language.
CSS styles web pages written in HTML and XHTML, but can also be applied to any application created using Extensible Markup Language (XML):
Scalable Vector Graphics (SVG) XML User Interface Language (XUL)
Learning XML by Erik T. Ray; Cascading Style Sheets, designing for the Web by Håkon Wium Lie and Bert Bos; and Wikipedia:
Nov. 15, 2005

5. More CSS basics Key concepts of CSS:
CSS defines colors, fonts, layout, and other aspects of document presentation
Key concepts of CSS:
Separates document structure from document presentation.
CSS can control the document’s style separately in alternative rendering methods, such as on-screen, in print, by voice, and on Braille-based, tactile devices.
The closer the style to the element, the more importance it carries.
Benefits of separation of structure and presenation:
Learning XML by Erik T. Ray; Cascading Style Sheets, designing for the Web by Håkon Wium Lie and Bert Bos; and
Wikipedia:
Nov. 15, 2005

6. Benefits of Using CSS Improved content accessibility
(faster downloads)
2. Greater flexibility
(examples: spacing, color, line height)
3. Control in specification of presentational characteristics
4. Reduced complexity of structural content compared to HTML
5. One-stop changes for small and large documents
Nov. 15, 2005

7. CSS’s background
Created in 1994 by Håkon Wium Lie at CERN (European Organization for Nuclear Research)
Purpose: Create simple but expressive language that could combine styles from different sources
First style sheets (SGML) in 1970s (embedded)
Existing style sheets were powerful but big and complex, not really practical for Web
Lie and others proposed a new standard
Cascading Style Sheets, designing for the Web by Håkon Wium Lie and Bert Bos
Nov. 15, 2005

8. CSS adoption, maintenance
W3C* recommends first CSS in 1996
CSS2 released in 1998, added functionality & increased properties from about 50 to 120+ (CSS )
CSS3 work in process
*World Wide Web Consortium maintains CSS specifications
Nov. 15, 2005

9. Why is called “cascading”?
Cascading effect of multiple style sheet rules.
embedded
Nov. 15, 2005

10. What CSS does & how csszengarden
CSS document provides rules for displaying HTML or XTML document with specific syntax:
Selector: Specifies element of document
Declaration: What property to apply
Property: Defines an aspect of element
Value: What quality to apply to property
Nov. 15, 2005

11. Syntax example Selector Declaration Property Value
/* A simple example/*
addressbook {
display-type: block;
font-family: sans-serif;
font-size: 12 pt;
background-color: white;
color: blue; }
entry {
border: thin solid black;
padding: 5em;
margin: 5em;
name, phone, , address {
margin-top: 2em;
margin-bottom: 2em;
Selector
Declaration
Property
Value
Nov. 15, 2005
Page 174, Learning XML, Ray

12. Syntax example (2) Selector Declaration Property Value
/* A simple example/*
addressbook {
display-type: block;
font-family: sans-serif;
font-size: 12 pt;
background-color: white;
color: blue; }
entry {
border: thin solid black;
padding: 5em;
margin: 5em;
name, phone, , address {
margin-top: 2em;
margin-bottom: 2em;
Selector
Declaration
Property
Value
Page 174, Learning XML, Ray
Nov. 15, 2005

13. Syntax example (3) Selector Declaration Property Value
/* A simple example/*
addressbook {
display-type: block;
font-family: sans-serif;
font-size: 12 pt;
background-color: white;
color: blue; }
entry {
border: thin solid black;
padding: 5em;
margin: 5em;
name, phone, , address {
margin-top: 2em;
margin-bottom: 2em;
Selector
Declaration
Property
Value
Page 174, Learning XML, Ray
Nov. 15, 2005

14. Syntax example (4) Selector Declaration Property Value
/* A simple example/*
addressbook {
display-type: block;
font-family: sans-serif;
font-size: 12 pt;
background-color: white;
color: blue; }
entry {
border: thin solid black;
padding: 5em;
margin: 5em;
name, phone, , address {
margin-top: 2em;
margin-bottom: 2em;
Selector
Declaration
Property
Value
Nov. 15, 2005
Page 174, Learning XML, Ray

15. Using CSS 3 simple yet practical applications: Initial or drop caps
Indenting paragraphs
Confetti menu (headlines)
From tables to CSS: redesigning Dr. Doom
Nov. 15, 2005

16. Dr. Doom original
Nov. 15, 2005

17. CSS for drop caps /* CSS Document */ .dropthecap {float:left;
margin-top:0px;
background-color:#FFFFFF;
color:#339999;
padding-top:.1em;
font-size:36pt;
height:.5em;
font-weight:bold;
font-family: "times","Times New Roman",serif;}
Nov. 15, 2005

18. Drop cap applied
Nov. 15, 2005

19. Paragraph Indent CSS p + p { text-indent: 1.5em; margin-top : 0 }
Nov. 15, 2005

20. Confetti menu (headlines) CSS
DIV.map {
padding-top: 190px;
margin-left: -2em; /* Adapt this to your own page... */
margin-right: -2em; /* Adapt this to your own page... */
margin-bottom: 4em;
margin-top: 5em;
clear: both;
text-shadow: 0.2em 0.2em /* 0.2em */ silver }
#p1, #p2, #p3, {
white-space: nowrap }
#p1, #p2, #p3, {
text-indent: 0 }
#p1, #p1 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}
#p2, #p2 A {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p1 {text-align: left; margin: -185px 0 85px 0}
#p2 {text-align: left; margin: -90px 0 70px 0}
#p3 {text-align: left; margin: -80px 0 55px 0}
Nov. 15, 2005

21. New Dr. Doom front page
Nov. 15, 2005

22. CSS Issues & Limitations
Inconsistent appearance in various browsers, platforms
Complex information or information stored in order different from presentation often exceeds CSS capabilities
Finite property sets
Implementation among clients mixed
Learning XML, Ray
Nov. 15, 2005

23. Tips
Order the items on your CSS style sheet in alphabetical order so you can find an element easily.
Found a webpage design you like? Copy the CSS, then change it to fit your needs.
Validate the CSS syntax before applying it to your HTML document but remember just because it’s valid doesn’t mean it’ll work or work the way you want it to work.
Nov. 15, 2005

24. Resources Learning XML by Erik T. Ray
Cascading Style Sheets, designing for the Web by Håkon Wium Lie and Bert Bos
Wikipedia: wikipedia.org/wiki/Cascading_Style_Sheets
CSS validator: jigsaw.w3.org
Nov. 15, 2005

25. Comments, questions ?
Nov. 15, 2005