an introduction to cascading style sheets n.
Skip this Video
Download Presentation
An Introduction to Cascading Style Sheets

Loading in 2 Seconds...

play fullscreen
1 / 20

An Introduction to Cascading Style Sheets - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'An Introduction to Cascading Style Sheets' - ezhno

Download Now 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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
an introduction to cascading style sheets

An Introduction to Cascading Style Sheets

Bebo White


September 9, 1997

what are cascading style sheets
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
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
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
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
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
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

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
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
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
Selectors (4)
  • Contextual selectors

p em { background : yellow}

  • To avoid repetitious statements within style sheets

H1, H2, H3 {

color: red;

font-family: Helvetica, sans-serif }

  • 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 denoted like C (and REXX) - /* and */
  • Comments cannot be nested
linking style sheets to html
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
Embedding a Style Sheet


. . . . . . .

<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}



. . . . . . .


inlining style
Inlining Style

<p style=“color: red; font-family: ‘new century schoolbook’,


This paragraph is styled in red with the New Century

Schoolbook font if available.


linking to an external style sheet
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”


importing a style sheet
Importing a Style Sheet

<style type=“text/css” media=“screen, projection”>


@import url(;

@import url(/stylesheets/punk.css);

dt { background: yellow; color: black }



  • “Cascading Style Sheets - Designing for the Web”, by Lie & Bos, Addison-Wesley, 1997
  • W3C -
  • (Style-o-Mattic)
  • Newsgroup - comp.infosystems.www.authoring. stylesheets