Project 8 - PowerPoint PPT Presentation

Project 8

Creating Style Sheets

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

Project 8: Creating Style Sheets

• 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

• Using an embedded style sheet
• Change the margin and link styles using an embedded style sheet

Project 8: Creating Style Sheets

• 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

Project 8: Creating Style Sheets

• Use the same menu.htm of project06

Before closing </head>, add embedded style sheet

Project 8: Creating Style Sheets

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

Project 8: Creating Style Sheets

• Create a file of “styles1.css”

Project 8: Creating Style Sheets

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

• Open an existing file with table – mySchedule.html

Project 8: Creating Style Sheets

• 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

• 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

• 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

Creating Style Sheets