HTML Concepts and Techniques Fourth Edition Project 8 Creating Style Sheets

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 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, add embedded style sheet

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

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 After <!--Insert link statement here , Type 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 Class schedule, Spring 2009 Replace with the following Class schedule, Spring 2009

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

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