Scribd Logo
Upload

Welcome to Scribd!

  • CSS

    Uploaded by

    Smart Idea
    8 views15 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views15 pages

    CSS

    Uploaded by

    Smart Idea

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 15

    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

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

    2
    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

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

    4
    Example1: Inline styles: inline.html

    <body> The style attribute allows you to declare inline styles.


    Separate multiple styles with a semicolon.

    <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
    5.3 Embedded Style Sheets

     Embed an entire CSS document in an XHTML document’s


    head section
    Attributes Description
    MIME type Multipurpose Internet Mail Extensions (MIME) type
    type = “text/css” Describes a file’s content

    Property Description
    background-color Specifies the background color
    font-family Specifies the name of the font to use
    font-size Specifies a 14-point font

    6
    Example2: Embedded style sheets: declared.html

    <head> this begins the style sheet section

    <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>
    7
    5.4 Conflicting Styles

     Inheritance
     Descendant’s properties have greater specificity
    than ancestor’s properties

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


    5.5 Linking External Style Sheets

     External style sheets


     Can provide uniform look and feel to entire site

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

    12
    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>
    13
    </p>
    </body>
    14
    5.6 Web Resources
     www.w3.org/TR/css3-roadmap
     www.ddj.com/webreview/style
     tech.irt.org/articles/css.htm

    15

    You might also like