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 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.
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)
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
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
What Does Cascading Mean? (2) Claims on documents usually - designer, user, browser affects inheritance users can turn off style sheets or “overrule” rules
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
Selectors Simple selector 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}
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>
Selectors (3) ID selectors - defines on a per-element basis #foo { text-indent : 10 em } <p id=foo>This text will be indented.</p>
Selectors (4) Contextual selectors p em { background : yellow}
Grouping To avoid repetitious statements within style sheets H1, H2, H3 { color: red; font-family: Helvetica, sans-serif }
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>
Comments Comments denoted like C (and REXX) - /* and */ Comments cannot be nested
Linking Style Sheets to HTML Embedding a style sheet Inlining style Linking to an external style sheet Importing a style sheet
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>
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>
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>
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>
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