project 8 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Project 8 PowerPoint Presentation
Download Presentation
Project 8

Loading in 2 Seconds...

play fullscreen
1 / 16

Project 8 - PowerPoint PPT Presentation


  • 139 Views
  • Uploaded on

Project 8. Creating Style Sheets. Project Objectives. Describe the three different types of Cascading Style Sheets Understand how to define style classes. Project Objectives. Using an external style sheet Create an external style sheet Change the body margins and background

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Project 8' - mahsa


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

Project 8

Creating Style Sheets

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

Project 8: Creating Style Sheets

project objectives1
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

project objectives2
Project Objectives
  • Using an embedded style sheet
    • Change the margin and link styles using an embedded style sheet

Project 8: Creating Style Sheets

project objectives3
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

style sheet precedence
Style Sheet Precedence

Project 8: Creating Style Sheets

starting notepad and opening an menu htm file
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

adding an embedded style sheet
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

check by clicking framedef htm
Check by clicking framedef.htm

Project 8: Creating Style Sheets

creating an external style sheet
Creating an External Style Sheet
  • Create a file of “styles1.css”

Project 8: Creating Style Sheets

creating an external style sheet1
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

linking to an external style sheet
Linking to an External Style Sheet
  • Open an existing file with table – mySchedule.html

Project 8: Creating Style Sheets

linking to an external style sheet1
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

adding an inline style sheet
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

adding an inline style sheet1
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

project 8 complete

Project 8 Complete

Creating Style Sheets