1. HTML Concepts and Techniques Fourth Edition Project 8 Creating Style Sheets

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

3. 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 tag to insert a link

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

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

6. Project 8: Creating Style Sheets 6 Style Sheet Precedence

7. Project 8: Creating Style Sheets 7 Starting Notepad and Opening an menu.htm File Use the same menu.htm of project06 Before closing, add embedded style sheet

8. Project 8: Creating Style Sheets 8 Adding an Embedded Style Sheet (before <!— 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} -->

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

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

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

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

13. Project 8: Creating Style Sheets 13 Linking to an External Style Sheet It should come before After <!--Insert link statement here , Type as the tag Check the changes

14. 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 Class schedule, Spring 2009 Replace with the following Class schedule, Spring 2009

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

16. HTML Concepts and Techniques Fourth Edition Project 8 Complete Creating Style Sheets