1 / 16

Project 8

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

mahsa
Download Presentation

Project 8

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. Project 8 Creating Style Sheets

  2. Project Objectives • Describe the three different types of Cascading Style Sheets • Understand how to define style classes Project 8: Creating Style Sheets

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

  4. Project Objectives • Using an embedded style sheet • Change the margin and link styles using an embedded style sheet Project 8: Creating Style Sheets

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

  6. Style Sheet Precedence Project 8: Creating Style Sheets

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

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

  9. Check by clicking framedef.htm Project 8: Creating Style Sheets

  10. Creating an External Style Sheet • Create a file of “styles1.css” Project 8: Creating Style Sheets

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

  12. Linking to an External Style Sheet • Open an existing file with table – mySchedule.html Project 8: Creating Style Sheets

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

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

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

  16. Project 8 Complete Creating Style Sheets

More Related