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

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

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

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: http://en.wikipedia.org/wiki/Cascading_Style_Sheets Nov. 15, 2005

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: http://en.wikipedia.org/wiki/Cascading_Style_Sheets Nov. 15, 2005

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

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

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

Why is called “cascading”? Cascading effect of multiple style sheet rules. embedded http://www.abdn.ac.uk Nov. 15, 2005

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

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, email, address { margin-top: 2em; margin-bottom: 2em; Selector Declaration Property Value Nov. 15, 2005 Page 174, Learning XML, Ray

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, email, address { margin-top: 2em; margin-bottom: 2em; Selector Declaration Property Value Page 174, Learning XML, Ray Nov. 15, 2005

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, email, address { margin-top: 2em; margin-bottom: 2em; Selector Declaration Property Value Page 174, Learning XML, Ray Nov. 15, 2005

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, email, address { margin-top: 2em; margin-bottom: 2em; Selector Declaration Property Value Nov. 15, 2005 Page 174, Learning XML, Ray

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

Dr. Doom original Nov. 15, 2005

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;} www.mandarindesign.com Nov. 15, 2005

Drop cap applied Nov. 15, 2005

Paragraph Indent CSS p + p { text-indent: 1.5em; margin-top : 0 } http://www.w3.org/Style/ Nov. 15, 2005

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

New Dr. Doom front page Nov. 15, 2005

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

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

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 www.mezzoblue.com www.csszengarden.com www.mandarindesign.com www.w3.org www.abdn.ac.uk www.blooberry.com CSS validator: jigsaw.w3.org Nov. 15, 2005

Comments, questions ? Nov. 15, 2005