Cascading style sheets css l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 15

Cascading Style Sheets™ (CSS) PowerPoint PPT Presentation


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

Cascading Style Sheets™ (CSS). Outline 5.1 Introduction 5.2 Inline Styles 5.3 Embedded Style Sheets 5.4 Conflicting Styles 5.5 Linking External Style Sheets 5.6 Web Resources. Objectives. In this lesson, you will learn:

Download Presentation

Cascading Style Sheets™ (CSS)

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


Cascading style sheets css l.jpg

Cascading Style Sheets™ (CSS)

Outline

5.1 Introduction

5.2 Inline Styles

5.3 Embedded Style Sheets

5.4 Conflicting Styles

5.5 Linking External Style Sheets

5.6 Web Resources


Objectives l.jpg

Objectives

  • In this lesson, you will learn:

    • To control the appearance of a Web site by creating style sheets.

    • To use a style sheet to give all the pages of a Web site the same look and feel.

    • To use the class attribute to apply styles.

    • To use style sheets to separate presentation from content.


5 1 introduction l.jpg

5.1  Introduction

  • Cascading Style Sheets (CSS)

    • Separation of structure from presentation

  • Three methods of CSS:

    • Inline Styles

    • Embedded Style Sheets

    • Conflicting Styles

    • Linking External Style Sheets


5 2 inline styles l.jpg

5.2  Inline Styles

  • Declare an individual element’s format

  • Attribute style

    • CSS property followed by a colon and a value

    • i.e: style = “font-size:20pt”


Example1 inline styles inline html l.jpg

Example1: Inline styles: inline.html

The style attribute allows you to declare inline styles. Separate multiple styles with a semicolon.

<body>

<p>This text does not have any style applied to it.</p>

<p style = "font-size: 20pt">This text has the

<em>font-size</em> style applied to it, making it 20pt.

</p>

<p style = "font-size: 20pt; color: #0000ff">

This text has the <em>font-size</em> and

<em>color</em> styles applied to it,

making it 20pt. and blue.</p>

</body>


5 3 embedded style sheets l.jpg

5.3  Embedded Style Sheets

  • Embed an entire CSS document in an XHTML document’s head section


Example2 embedded style sheets declared html l.jpg

Example2: Embedded style sheets: declared.html

this begins the style sheet section

<head>

<style type = "text/css">

em { background-color: #8000ff; color: white }

h1 { font-family: arial, sans-serif }

p { font-size: 14pt }

.special { color: blue }

</style>

</head>

<h1 class = "special">Deitel &amp; Associates, Inc.</h1>

<p>Deitel &amp; Associates, Inc. ..

programming, and Object Technology.</p>

<h1>Clients</h1>

<p class = "special"> The company's clients include

many <em>Fortune 1000 companies</em>,

government agencies, branches ….

and World Wide Web courses.</p>


5 4 conflicting styles l.jpg

5.4  Conflicting Styles

  • Inheritance

    • Descendant’s properties have greater specificity than ancestor’s properties


Example3 inheritance in style sheets advanced html l.jpg

Example3: Inheritance in style sheets: advanced.html

<style type = "text/css">

a.nodec { text-decoration: none }

a:hover { text-decoration: underline;color: red;background-color: #ccffcc }

li em { color: red;font-weight: bold }

ul { margin-left: 75px }

ul ul { text-decoration: underline; margin-left: 15px }

</style>

<h1>Shopping list for <em>Monday</em>:</h1>

<ul>

<li>Milk</li>

<li>Bread

<ul>

<li>White bread</li>

<li>Rye bread</li>

<li>Whole wheat bread</li>

</ul>

</li>

<li>Rice</li>

<li>Potatoes</li>

<li>Pizza <em>with mushrooms</em></li>

</ul>

<p><a class = "nodec" href = "http://www.food.com">Go to the Grocery store</a></p>


Example3 inheritance in style sheets advanced html10 l.jpg

Example3: Inheritance in style sheets: advanced.html

<style type = "text/css">

a.nodec { text-decoration: none }

a:hover { text-decoration: underline;color: red;background-color: #ccffcc }

li em { color: red;font-weight: bold }

ul { margin-left: 75px }

ul ul { text-decoration: underline; margin-left: 15px }

</style>

<h1>Shopping list for <em>Monday</em>:</h1>

<ul>

<li>Milk</li>

<li>Bread

<ul>

<li>White bread</li>

<li>Rye bread</li>

<li>Whole wheat bread</li>

</ul>

</li>

<li>Rice</li>

<li>Potatoes</li>

<li>Pizza <em>with mushrooms</em></li>

</ul>

<p><a class = "nodec" href = "http://www.food.com">Go to the Grocery store</a></p>


5 5 linking external style sheets l.jpg

5.5  Linking External Style Sheets

  • External style sheets

    • Can provide uniform look and feel to entire site


Example4 external style sheets styles css l.jpg

Example4: External style sheets: styles.css

a { text-decoration: none }

a:hover { text-decoration: underline; color: red;

background-color: #ccffcc }

li em { color: red; font-weight: bold; background-color: #ffffff }

ul { margin-left: 2cm }

ul ul { text-decoration: underline; margin-left: .5cm }


Example4 linking external style sheets external html l.jpg

Example4: Linking external style sheets: external.html

<head>

<link rel = "stylesheet" type = "text/css" href = "styles.css" />

</head>

<body>

<h1>Shopping list for <em>Monday</em>:</h1>

<ul>

<li>Milk</li>

<li>Bread

<ul>

<li>White bread</li>

<li>Rye bread</li>

<li>Whole wheat bread</li>

</ul>

</li>

<li>Rice</li>

<li>Potatoes</li>

<li>Pizza <em>with mushrooms</em></li>

</ul>

<p>

<a href = "http://www.food.com">Go to the Grocery store</a>

</p>

</body>


5 6 web resources l.jpg

5.6  Web Resources

  • www.w3.org/TR/css3-roadmap

  • www.ddj.com/webreview/style

  • tech.irt.org/articles/css.htm


  • Login