1 / 20

An Introduction to Cascading Style Sheets

An Introduction to Cascading Style Sheets. Bebo White WSC September 9, 1997. What Are Cascading Style Sheets?. CSS is a simple mechanism for adding style to HTML documents. With CSS, you can specify such styles as the size, color, and

ezhno
Télécharger la présentation

An Introduction to Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. An Introduction to Cascading Style Sheets Bebo White WSC September 9, 1997

  2. What Are Cascading Style Sheets? CSS is a simple mechanism for adding style to HTML documents. With CSS, you can specify such styles as the size, color, and spacing of text, as well as the placement of text and images on a page plus lots more. A style sheet is a set of stylistic rules that describe how HTML documents are presented to users.

  3. Why CSS? • Originally HTML separated content from structure (display) • Display was left to the whims of the browser (e.g., how does <H1> look?) • Plug-ins and helper applications calmed the fears of page designers concerned about display (e.g., PDF)

  4. Viewing Style • Supported by Navigator 4.0, IE4.0, and some earlier browsers • Style sheets designed such that style is ignored in non-compliant browsers • < STYLE> tag • Style definitions in HTML comments

  5. What Does Cascading Mean? • Several different style sheets can be “attached” to a page and all of them can influence the presentation of the page • The author can specify how a page “should” look; the reader can “attach” a personal style sheet for their preferences

  6. What Does Cascading Mean? (2) • Claims on documents • usually - designer, user, browser • affects inheritance • users can turn off style sheets or “overrule” rules

  7. CSS Structure and Rules • Style sheets may be defined internally (inside a page) or externally (in a file) • Basic syntax • Rules (Selectors and Declarations) • Grouping • Inheritance • Comments

  8. Selectors Any HTML element is a possible CSS selector. The selector is simply the element that is linked to a particular style • Simple selector Selector { property: value} P { textindent: 3 em}

  9. Selectors (2) • Class selectors code.html { color : green} code.css { color : #4b0082} <code class=html>This is a listing of some HTML code - it’s green.</code> .note { font-size: small } <p class=note> This text will be small.</p>

  10. Selectors (3) • ID selectors - defines on a per-element basis #foo { text-indent : 10 em } <p id=foo>This text will be indented.</p>

  11. Selectors (4) • Contextual selectors p em { background : yellow}

  12. Grouping • To avoid repetitious statements within style sheets H1, H2, H3 { color: red; font-family: Helvetica, sans-serif }

  13. Inheritance • Virtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified; e.g., color defined for <body> will apply to <p> • Inheritance is logical; e.g., margin-top in <body> will not apply to <p>

  14. Comments • Comments denoted like C (and REXX) - /* and */ • Comments cannot be nested

  15. Linking Style Sheets to HTML • Embedding a style sheet • Inlining style • Linking to an external style sheet • Importing a style sheet

  16. Embedding a Style Sheet <head> . . . . . . . <style type=“text/css” media=screen> <!-- body { background: url(foo.gif); color: black} p em { background: yellow; color: black} .note { margin-left: 5 em; margin-right: 5 em} --> </style> . . . . . . . </head>

  17. Inlining Style <p style=“color: red; font-family: ‘new century schoolbook’, serif”> This paragraph is styled in red with the New Century Schoolbook font if available. </p>

  18. Linking to an External Style Sheet <link rel=StyleSheet href=“style.css” type=“text/css”> <link rel=StyleSheet href=“color-8b.css” type=“text/css” title=“8-bit Color Style” media=screen>

  19. Importing a Style Sheet <style type=“text/css” media=“screen, projection”> <!-- @import url(http://www.slac.stanford.edu/style.css); @import url(/stylesheets/punk.css); dt { background: yellow; color: black } --> </style>

  20. References • “Cascading Style Sheets - Designing for the Web”, by Lie & Bos, Addison-Wesley, 1997 • W3C - http://www.w3.org/Style/ • http://www.cnet.com/Content/Builder/Authoring/CSS/index.html (Style-o-Mattic) • Newsgroup - comp.infosystems.www.authoring. stylesheets

More Related