chapter 7 using advanced cascading style sheets html5 & css 7 th edition
TRANSCRIPT
Chapter 7
Using Advanced Cascading Style Sheets
HTML5 & CSS
7th Edition
• Add an embedded style sheet to a Web page• Change the body and link styles using an
embedded style sheet• Create a drop-down menu using an embedded
style sheet• Change the color and font styles of the drop-down
menus• Create an external style sheet
Chapter 7: Using Advanced Cascading Style Sheets 2
Chapter Objectives
• Change the paragraph margins and font styles using an external style sheet
• Create a pop-up using an external style sheet• Use classes, pseudoclasses, and divisions for the
pop-up effect• Use the <link> tag to insert a link to an external
style sheet• Add an external style sheet for printing Web
pagesChapter 7: Using Advanced Cascading Style Sheets 3
Chapter Objectives
• Plan the Web site• Analyze the need• Choose the content for the Web page• Determine the type of style sheets to use for the
pages and their precedence• Create the style sheets
Chapter 7: Using Advanced Cascading Style Sheets 4
Plan Ahead
Chapter 7: Using Advanced Cascading Style Sheets 5
Using Style Sheets
Chapter 7: Using Advanced Cascading Style Sheets 6
Shorthand Properties
Chapter 7: Using Advanced Cascading Style Sheets 7
Measurement Values
Chapter 7: Using Advanced Cascading Style Sheets 8
Position Property Values
Chapter 7: Using Advanced Cascading Style Sheets 9
Adding an Embedded Style Sheet
• It is useful to understand how you can structure your Web page by dividing it into logical sections
• The CSS box model describes the structure of the elements that are displayed on the Web page
• The margin specifies the space between the element and other content on the Web page
• The border is what surrounds the element content• The padding is the space between the content of
the element and the box borderChapter 7: Using Advanced Cascading Style Sheets 10
Structuring the Web page
Chapter 7: Using Advanced Cascading Style Sheets 11
Structuring the Web page
Chapter 7: Using Advanced Cascading Style Sheets 12
Creating an External Style Sheet
Chapter 7: Using Advanced Cascading Style Sheets 13
Linking to an External Style Sheet
Chapter 7: Using Advanced Cascading Style Sheets 14
Creating an External Style Sheet for Printing
Chapter 7: Using Advanced Cascading Style Sheets 15
Creating an External Style Sheet for Printing
• Add an embedded style sheet to a Web page• Change the body and link styles using an
embedded style sheet• Create a drop-down menu using an embedded
style sheet• Change the color and font styles of the drop-down
menus• Create an external style sheet
Chapter 7: Using Advanced Cascading Style Sheets 16
Chapter Summary
• Change the paragraph margins and font styles using an external style sheet
• Create a pop-up using an external style sheet• Use classes, pseudoclasses, and divisions for the
pop-up effect• Use the <link> tag to insert a link to an external
style sheet• Add an external style sheet for printing Web
pagesChapter 7: Using Advanced Cascading Style Sheets 17
Chapter Summary
Chapter 7 Complete
HTML7th Edition