chapter 7 using advanced cascading style sheets html5 & css 7 th edition
TRANSCRIPT
![Page 1: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/1.jpg)
Chapter 7
Using Advanced Cascading Style Sheets
HTML5 & CSS
7th Edition
![Page 2: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/2.jpg)
• 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
![Page 3: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/3.jpg)
• 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
![Page 4: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/4.jpg)
• 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
![Page 5: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/5.jpg)
Chapter 7: Using Advanced Cascading Style Sheets 5
Using Style Sheets
![Page 6: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/6.jpg)
Chapter 7: Using Advanced Cascading Style Sheets 6
Shorthand Properties
![Page 7: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/7.jpg)
Chapter 7: Using Advanced Cascading Style Sheets 7
Measurement Values
![Page 8: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/8.jpg)
Chapter 7: Using Advanced Cascading Style Sheets 8
Position Property Values
![Page 9: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/9.jpg)
Chapter 7: Using Advanced Cascading Style Sheets 9
Adding an Embedded Style Sheet
![Page 10: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/10.jpg)
• 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
![Page 11: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/11.jpg)
Chapter 7: Using Advanced Cascading Style Sheets 11
Structuring the Web page
![Page 12: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/12.jpg)
Chapter 7: Using Advanced Cascading Style Sheets 12
Creating an External Style Sheet
![Page 13: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/13.jpg)
Chapter 7: Using Advanced Cascading Style Sheets 13
Linking to an External Style Sheet
![Page 14: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/14.jpg)
Chapter 7: Using Advanced Cascading Style Sheets 14
Creating an External Style Sheet for Printing
![Page 15: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/15.jpg)
Chapter 7: Using Advanced Cascading Style Sheets 15
Creating an External Style Sheet for Printing
![Page 16: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/16.jpg)
• 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
![Page 17: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/17.jpg)
• 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
![Page 18: Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition](https://reader037.vdocuments.mx/reader037/viewer/2022103123/56649d375503460f94a0f710/html5/thumbnails/18.jpg)
Chapter 7 Complete
HTML7th Edition