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