Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML, XHTML, and CSS Chapter 7 Using Advanced Cascading Style Sheets.

Similar presentations


Presentation on theme: "HTML, XHTML, and CSS Chapter 7 Using Advanced Cascading Style Sheets."— Presentation transcript:

1 HTML, XHTML, and CSS Chapter 7 Using Advanced Cascading Style Sheets

2 Chapter 7: Using Advanced Cascading Style Sheets 2 Chapter Objectives 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 bar using an embedded style sheet Change the color and font styles of the drop- down menus Create an external style sheet

3 Chapter 7: Using Advanced Cascading Style Sheets 3 Chapter Objectives Change the paragraph margins and font styles using an external style sheet Create a hover pop-up using an external style sheet Use classes, pseudoclasses, and divisions for the pop-up function Use the tag to insert a link to an external style sheet Add an external style sheet for printing Web pages

4 Chapter 7: Using Advanced Cascading Style Sheets 4 Starting Notepad++ and Opening an HTML File Start Notepad++ and, if necessary, maximize the window With the USB drive plugged into your computer, click File on the menu bar and then click Open If necessary, navigate to the Chapter07\ChapterFiles folder on the USB drive Double-click sapperzein.html in the list of files to open the file shown on the following slide

5 Chapter 7: Using Advanced Cascading Style Sheets 5 Starting Notepad++ and Opening an HTML File

6 Chapter 7: Using Advanced Cascading Style Sheets 6 Adding an Embedded Style Sheet Highlight the comment, on line 10 Enter the CSS code shown in Table 7–6

7 Adding an Embedded Style Sheet Chapter 7: Using Advanced Cascading Style Sheets 7

8 8 Adding an Embedded Style Sheet

9 Chapter 7: Using Advanced Cascading Style Sheets 9 Saving, Validating, and Viewing an HTML File With the USB drive plugged into your computer, click File on the menu bar and then click Save Validate the Web page using the W3C validation service Open the sapperzein.html in the Web browser to show the completed navigation menu, as shown at the top of the sapperzein.html Web page

10 Chapter 7: Using Advanced Cascading Style Sheets 10 Saving, Validating, and Viewing an HTML File

11 Chapter 7: Using Advanced Cascading Style Sheets 11 Creating and Printing an External Style Sheet If necessary, click the Notepad++ button on the taskbar. Click File on the menu bar and then click New Enter the CSS code as shown in Table 7–7 With the USB drive plugged into your computer, click File on the menu bar and then click Save As. Type styles7.css in the File name text box. If necessary, navigate to the Chapter07\ChapterFiles folder on your USB drive. Click the Save button in the Save As dialog box to save the file as styles7.css Click the File menu, click Print on the File menu, and click the Print button in the Print dialog box

12 Creating and Printing an External Style Sheet Chapter 7: Using Advanced Cascading Style Sheets 12

13 Creating and Printing an External Style Sheet Chapter 7: Using Advanced Cascading Style Sheets 13

14 Linking to an External Style Sheet If necessary, click the Notepad++ button on the taskbar With the USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu If necessary, navigate to the G:\Chapter07\ ChapterFiles folder. Click the greece.html file Click the Open button in the Open dialog box Highlight the text, on line 10 Type to enter the link to the external style sheet Chapter 7: Using Advanced Cascading Style Sheets 14

15 Linking to an External Style Sheet Click File on the menu bar and then click Save on the File menu Validate the Web page using the W3C service Return to the browser window and use the menu bar to click Travel and then click Greece. Hover over each image shown on the Web page to see the changes in the Web page Chapter 7: Using Advanced Cascading Style Sheets 15

16 Linking to an External Style Sheet Chapter 7: Using Advanced Cascading Style Sheets 16

17 Linking the Remaining HTML File to an External Style Sheet If necessary, click the Notepad++ button on the taskbar With the USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu If necessary, navigate to the G:\Chapter07\ChapterFiles folder. Click the pompeii.htm file Click the Open button in the Open dialog box Highlight the text, on line 10 Type to enter the link to the external style sheet Chapter 7: Using Advanced Cascading Style Sheets 17

18 Saving, Validating, and Testing the Web Page Click File on the menu bar and then click Save on the File menu Validate the Web page. For the external style sheet, make sure to use the CSS validator found at validator/#validate_by_upload Open pompeii.html in a Web browser and test to see that the pop-up styles are implemented Chapter 7: Using Advanced Cascading Style Sheets 18

19 Chapter 7: Using Advanced Cascading Style Sheets 19 Creating and Printing an External Style Sheet for Printing If necessary, click the Notepad++ button on the taskbar. Click File on the menu bar and then click New Enter the CSS code as shown in Table 7–8 With the USB drive plugged into your computer, click File on the menu bar and then click Save As. Type printpage.css in the File name text box. If necessary, navigate to the Chapter07\ChapterFiles folder on your USB drive. Click the Save button in the Save As dialog box to save the file as printpage.css Click the File menu, click Print on the File menu, and click the Print button in the Print dialog box to print the CSS code

20 Creating and Printing an External Style Sheet for Printing Chapter 7: Using Advanced Cascading Style Sheets 20

21 Chapter 7: Using Advanced Cascading Style Sheets 21 Creating and Printing an External Style Sheet for Printing

22 Chapter 7: Using Advanced Cascading Style Sheets 22 Linking to an External Style Sheet Click the sapperzein.html tab in Notepad++ Click to the right of the > at the end of in line 8 and press the ENTER key twice Type to enter the link to the external style sheet Click File on the menu bar and then click Save on the File menu

23 Chapter 7: Using Advanced Cascading Style Sheets 23 Linking to an External Style Sheet

24 Chapter 7: Using Advanced Cascading Style Sheets 24 Printing an HTML File Click Print on the File menu and then click the Print button in the Print dialog box to print the sapperzein.html code

25 Chapter 7: Using Advanced Cascading Style Sheets 25 Testing the External Style Sheet Click the Internet Explorer button in the taskbar and then click the Return to Sapperzein Galleries link at the bottom of the Web page Click the Refresh button Click the Print icon arrow in the Command bar and then click Print Preview to verify that the menu bar will not print

26 Chapter 7: Using Advanced Cascading Style Sheets 26 Testing the External Style Sheet

27 Chapter 7: Using Advanced Cascading Style Sheets 27 Quitting Notepad++ and a Browser Close all open browser windows Click File on the Notepad++ menu bar and then click Close All Click the Close button on the Notepad++ window title bar

28 Chapter 7: Using Advanced Cascading Style Sheets 28 Chapter Summary 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 bar using an embedded style sheet Change the color and font styles of the drop- down menus Create an external style sheet

29 Chapter 7: Using Advanced Cascading Style Sheets 29 Chapter Summary Change the paragraph margins and font styles using an external style sheet Create a hover pop-up using an external style sheet Use classes, pseudoclasses, and divisions for the pop-up function Use the tag to insert a link to an external style sheet Add an external style sheet for printing Web pages

30 HTML, XHTML, and CSS Chapter 7 Complete Using Advanced Cascading Style Sheets


Download ppt "HTML, XHTML, and CSS Chapter 7 Using Advanced Cascading Style Sheets."

Similar presentations


Ads by Google