An introduction to cascading style sheets
This presentation is the property of its rightful owner.
Sponsored Links
1 / 20

An Introduction to Cascading Style Sheets PowerPoint PPT Presentation


  • 129 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

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

WSC

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


Selectors

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}


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}


Grouping

Grouping

  • To avoid repetitious statements within style sheets

H1, H2, H3 {

color: red;

font-family: Helvetica, sans-serif }


Inheritance

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

  • 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

<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

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

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

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

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


  • Login