{[ promptMessage ]}

Bookmark it

{[ promptMessage ]}

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

Info icon This 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 boxshadowdwn CSS = Cascading Style Sheets circleshadowdwn cumulative effect with overrides, hence "cascading" circleshadowdwn "A simple mechanism for adding style to Web documents" boxshadowdwn fonts, colours, spacing, layout, … boxshadowdwn CSS applies generically to all forms of XML (including of course XHTML), as well as HTML 4
Image of page 1

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

View Full Document Right 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 boxshadowdwn Particularly optimized for use with HTML boxshadowdwn In original HTML, style was done using HTML elements and attributes. circleshadowdwn e.g. <i>, <b>, <blink>, <center>, <bgcolor> etc. boxshadowdwn In HTML 4, these were mostly deprecated in favour of attaching to external style languages not defined as part of HTML. circleshadowdwn CSS is an example (XSL is another) circleshadowdwn Definitive specs: boxshadowdwn Cascading Style Sheets, level 1 circleshadowdwn http://www.w3.org/TR/REC-CSS1 boxshadowdwn Cascading Style Sheets, level 2 circleshadowdwn http://www.w3.org/TR/REC-CSS2 15CSS CSCC09 Programming on the Web 4 CSS Advantages boxshadowdwn Precise control over presentation boxshadowdwn Simplify site maintenance circleshadowdwn Single definition of style-related data circleshadowdwn Multiple renderings reference the definition boxshadowdwn Faster downloads circleshadowdwn CSS files can be cached for reuse circleshadowdwn Eliminate redundant style tags in document body boxshadowdwn Resolution independence circleshadowdwn Supports relative measurements for layouts, e.g. “em”, % boxshadowdwn Media-specific rendering circleshadowdwn Accessibility (e.g., Braille, aural, handheld) circleshadowdwn Print-specific formatting – e.g. pagination
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 circleshadowdwn Note, must declare these in the DTD Example: circleshadowdwn resume_css.xml circleshadowdwn resume.css circleshadowdwn resume.dtd 15CSS CSCC09 Programming on the Web 6 Linking HTML with CSS boxshadowdwn 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 boxshadowdwn What are the advantages of each?
Image of page 3

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

View Full Document Right 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 }
Image of page 4
Image of page 5
This is the end of the preview. Sign up to access the rest of the document.

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern