15css-2up - 15 CSS 14 Oct, 2010 CSCC09F Programming on the...

Info iconThis preview shows pages 1–5. Sign up to view the full content.

View Full Document Right Arrow Icon
15 CSS 14 Oct, 2010 CSCC09 Programming on the Web 1 15CSS CSCC09 Programming on the Web 1 CSS: Cascading Style Sheets associating style with structure, example style properties, the cascade, compatibility CSCC09F Programming on the Web 15CSS CSCC09 Programming on the Web 2 Separation of Style and Content b CSS = Cascading Style Sheets c cumulative effect with overrides, hence "cascading" c "A simple mechanism for adding style to Web documents" b fonts, colours, spacing, layout, … b CSS applies generically to all forms of XML (including of course XHTML), as well as HTML 4
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
15 CSS 14 Oct, 2010 CSCC09 Programming on the Web 2 15CSS CSCC09 Programming on the Web 3 Separation of Style and Content b Particularly optimized for use with HTML b In original HTML, style was done using HTML elements and attributes. c e.g. <i>, <b>, <blink>, <center>, <bgcolor> etc. b In HTML 4, these were mostly deprecated in favour of attaching to external style languages not defined as part of HTML. c CSS is an example (XSL is another) c Definitive specs: b Cascading Style Sheets, level 1 c http://www.w3.org/TR/REC-CSS1 b Cascading Style Sheets, level 2 c http://www.w3.org/TR/REC-CSS2 15CSS CSCC09 Programming on the Web 4 CSS Advantages b Precise control over presentation b Simplify site maintenance c Single definition of style-related data c Multiple renderings reference the definition b Faster downloads c CSS files can be cached for reuse c Eliminate redundant style tags in document body b Resolution independence c Supports relative measurements for layouts, e.g. “em”, % b Media-specific rendering c Accessibility (e.g., Braille, aural, handheld) c Print-specific formatting – e.g. pagination
Background image of page 2
15 CSS 14 Oct, 2010 CSCC09 Programming on the Web 3 15CSS CSCC09 Programming on the Web 5 Linking XML with CSS 1. Use the <?xml-stylesheet … > PI (Processing Instruction) 2. Use inline "style" attributes c Note, must declare these in the DTD Example: c resume_css.xml c resume.css c resume.dtd 15CSS CSCC09 Programming on the Web 6 Linking HTML with CSS b Four methods for associating a CSS with an HTML file: 1. <link rel="stylesheet" type="text/css" …> to reference an external stylesheet 2. @import an external stylesheet 3. Embed a stylesheet definition within a <style> element in the document head element 4. Define inline styles using style attributes b What are the advantages of each?
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
15 CSS 14 Oct, 2010 CSCC09 Programming on the Web 4 15CSS CSCC09 Programming on the Web 7 Linking HTML with CSS <html> <head> <title>CSS Linking Example</title> <link rel="stylesheet" type="text/css" href="http://www.utsc.utoronto.ca/style.css"/> <style type="text/css"> @import url(http://www.utsc.utoronto.ca/basic.css); h1 { color: blue } /* single style sheet with */ </style> /* override on h1 color */ </head> <body> <h1>Headline is blue</h1> <p style="color: green">This paragraph is green.</p> </body> </html> 15CSS CSCC09 Programming on the Web 8 The CSS Language b Using CSS, one associates style property values
Background image of page 4
Image of page 5
This is the end of the preview. Sign up to access the rest of the document.

This note was uploaded on 11/09/2010 for the course CS CSCC09 taught by Professor Alan during the Spring '10 term at University of Toronto- Toronto.

Page1 / 16

15css-2up - 15 CSS 14 Oct, 2010 CSCC09F Programming on the...

This preview shows document pages 1 - 5. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online