1 / 15

Cascading Style Sheets™ (CSS)

Learn about Inline Styles, Embedded Style Sheets, Conflicting Styles, and Linking External Style Sheets to control the appearance and presentation of your website. Understand the separation of structure from presentation in CSS.

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

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

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

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

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

  6. 5.3  Embedded Style Sheets • Embed an entire CSS document in an XHTML document’s head section

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

  8. 5.4  Conflicting Styles • Inheritance • Descendant’s properties have greater specificity than ancestor’s properties

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

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

  11. 5.5  Linking External Style Sheets • External style sheets • Can provide uniform look and feel to entire site

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

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

  14. 5.6  Web Resources • www.w3.org/TR/css3-roadmap • www.ddj.com/webreview/style • tech.irt.org/articles/css.htm

More Related