Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Project 8 - PowerPoint by 2m3MTq1b

VIEWS: 0 PAGES: 16

									                         HTML
              Concepts and Techniques
                        Fourth Edition




   Project 8



Creating Style Sheets
         Project Objectives

 • Describe the three different types of Cascading
   Style Sheets
 • Understand how to define style classes




Project 8: Creating Style Sheets                     2
         Project Objectives

 • Using an external style sheet
     –   Create an external style sheet
     –   Change the body margins and background
     –   Change the link decoration and color
     –   Change the font family and size for all paragraphs
     –   Change table styles
     –   Use the <link> tag to insert a link




Project 8: Creating Style Sheets                          3
         Project Objectives

 • Using an embedded style sheet
     – Change the margin and link styles using an
       embedded style sheet




Project 8: Creating Style Sheets                    4
         Project Objectives

 • Add an inline style sheet to a Web page
     – Change the text style of a single paragraph using
       an inline style sheet




Project 8: Creating Style Sheets                       5
         Style Sheet Precedence




Project 8: Creating Style Sheets   6
         Starting Notepad
         and Opening an menu.htm File
 • Use the same menu.htm of project06

 Before closing </head>, add embedded style sheet




Project 8: Creating Style Sheets                7
         Adding an Embedded Style Sheet

 <!-- Insert embedded style sheet here --> (before </head>

 <style type="text/css">
 <!—
 body {background-color: lightblue}
 p {text-indent: 20pt}
 a {text-decoration: none;
    font-family: Verdana, Garamond;
    font-size: 12pt;
    color: black}
 a:hover {background: black;
 color: whilte}
 -->
 </style>
Project 8: Creating Style Sheets                             8
         Check by clicking framedef.htm




Project 8: Creating Style Sheets          9
         Creating an External Style Sheet

 • Create a file of “styles1.css”




Project 8: Creating Style Sheets            10
         Creating an External Style Sheet

 p {text-indent: 20pt}

 a {text-decoration: none;
    color: black}

 p {font-family: verdana, Garamond;
    font-size: 11pt;
    border-color: black;
    border-style: double}

 th {background-color: #66CBFF;
    text-aligh: left}

 caption {font-size: 8pt;
  font-style: italic}


Project 8: Creating Style Sheets            11
         Linking to an External Style Sheet

 • Open an existing file with table –
   mySchedule.html




Project 8: Creating Style Sheets              12
         Linking to an External Style Sheet

 • It should come before </head>
 • After <!--Insert link statement here ,
 • Type <link rel=“stylesheet”
   type=“text/css” href=“styles1.css”/>
   as the tag
 • Check the changes




Project 8: Creating Style Sheets              13
         Adding an Inline Style Sheet

 • Add an inline style sheet to mySchedule.html
 • Change the style of tag

 Instead of
  <caption align="bottom"><em>Class schedule, Spring
    2009</em></caption>


 Replace with the following
 <caption style="font-style: italic; font-size: 20pt"
   align="bottom">Class schedule, Spring
   2009</caption>
Project 8: Creating Style Sheets                        14
         Adding an Inline Style Sheet

 • Observe the “inline style sheet” override the “external
   style sheet”
 • Check the same thing for the “embedded style sheet” at
   the “menu.htm” file


  <! Add an inline style sheet-->

 <p style="font-style: italic; font-size: 20pt" > Cross
   Hatch </p><br />



Project 8: Creating Style Sheets                             15
                           HTML
                Concepts and Techniques
                          Fourth Edition




Project 8 Complete



  Creating Style Sheets

								
To top