Project 8

1
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 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 ltlinkgt tag to insert a link

4
Project Objectives

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

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
Style Sheet Precedence
7
Starting Notepad and Opening an menu.htm File

• Use the same menu.htm of project06
• Before closing lt/headgt, add embedded style sheet

8
Adding an Embedded Style Sheet

• lt!-- Insert embedded style sheet here --gt (before
  lt/headgt
• ltstyle type"text/css"gt
• lt!
• body background-color lightblue
• p text-indent 20pt
• a text-decoration none
• font-family Verdana, Garamond
• font-size 12pt
• color black
• ahover background black
• color whilte
• --gt
• lt/stylegt

9
Check by clicking framedef.htm
10
Creating an External Style Sheet

• Create a file of styles1.css

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
Linking to an External Style Sheet

• Open an existing file with table mySchedule.html

13
Linking to an External Style Sheet

• It should come before lt/headgt
• After lt!--Insert link statement here ?,
• Type ltlink relstylesheet typetext/css
  hrefstyles1.css/gt as the tag
• Check the changes

14
Adding an Inline Style Sheet

• Add an inline style sheet to mySchedule.html
• Change the style of tag
• Instead of
• ltcaption align"bottom"gtltemgtClass schedule,
  Spring 2009lt/emgtlt/captiongt
• Replace with the following
• ltcaption style"font-style italic font-size
  20pt" align"bottom"gtClass schedule, Spring
  2009lt/captiongt

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
• lt! Add an inline style sheet--gt
• ltp style"font-style italic font-size 20pt" gt
  Cross Hatch lt/pgtltbr /gt

16
Project 8 Complete

• Creating Style Sheets