1. HTML Concepts and Techniques Fourth Edition Project 8 Creating Style Sheets

2. Project 8: Creating Style Sheets 2 Project Objectives Describe the three different types of Cascading Style Sheets Add an embedded style sheet to a Web page Change the margin and link styles using an embedded style sheet Create an external style sheet

3. Project 8: Creating Style Sheets 3 Project Objectives Change the body margins and background using an external style sheet Change the link decoration and color using an external style sheet Change the font family and size for all paragraphs using an external style sheet Change table styles using an external style sheet

4. Project 8: Creating Style Sheets 4 Project Objectives Use the tag to insert a link to an external style sheet Add an inline style sheet to a Web page Change the text style of a single paragraph using an inline style sheet Understand how to define style classes

5. Project 8: Creating Style Sheets 5 Style Sheet Precedence

6. Project 8: Creating Style Sheets 6 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 on the File menu. If necessary, click UDISK (G:) in the Look in list. Click the Project08 folder and then click the ProjectFiles folder in the list of available folders If necessary, click the Files of type list arrow and then click All Files Double-click menu.htm in the list of files

7. Project 8: Creating Style Sheets 7 Starting Notepad and Opening an HTML File

8. Project 8: Creating Style Sheets 8 Adding an Embedded Style Sheet Highlight the comment,, on line 9 and then press the DELETE key Enter the CSS code as shown on the following slide

9. Project 8: Creating Style Sheets 9 Adding an Embedded Style Sheet

10. Project 8: Creating Style Sheets 10 Saving an HTML File With the USB drive plugged into your computer click File on the menu bar and then click Save As. If necessary, type menu.htm in the File name text box If necessary, click UDISK (G:) in the Save in list. Click the Project08 folder, and then click the ProjectFiles folder in the list of available folders Click the Save button in the Save As dialog box. If a Save As dialog box is displayed, click Yes to continue saving

11. Project 8: Creating Style Sheets 11 Viewing an HTML File Using a Browser Start your browser Click the Address bar. Type G:\Project08\ProjectFiles\ index.htm in the Address text box and then press the ENTER key

12. Project 8: Creating Style Sheets 12 Viewing an HTML File Using a Browser

13. Project 8: Creating Style Sheets 13 Printing an HTML File Click the Notepad button on the taskbar Click File on the menu bar and then click Print on the File menu Click the Print button in the Print dialog box

14. Project 8: Creating Style Sheets 14 Printing an HTML File

15. Project 8: Creating Style Sheets 15 Creating 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 8-5 on page HTM 349 With the USB drive plugged into your computer, click File on the menu bar and then click Save As. Type styles1.css in the File name text box. If necessary, click UDISK (G:) in the Save in list. Click the Project08 folder and then click the ProjectFiles folder in the list of available folders. Click the Save button in the Save As dialog box Click the File menu and then click Print on the File menu

16. Project 8: Creating Style Sheets 16 Creating an External Style Sheet

17. Project 8: Creating Style Sheets 17 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 Type contact.htm in the File name text box. If necessary, click UDISK (G:) in the Look in list, click the Project08 folder, and then click the ProjectFiles folder in the list of available folders Click the Open button in the Open dialog box

18. Project 8: Creating Style Sheets 18 Linking to an External Style Sheet Highlight the text,, in line 9 and then press the DELETE key Type as the tag Click File on the menu bar and then click Save on the File menu

19. Project 8: Creating Style Sheets 19 Linking to an External Style Sheet

20. Project 8: Creating Style Sheets 20 Linking the Remaining HTML Files to an External Style Sheet With the USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu Type products.htm in the File name text box. If necessary, click UDISK (G:) in the Look in list, click the Project08 folder, and then click the ProjectFiles folder in the list of available folders Click the Open button in the Open dialog box Highlight the text,, and press the DELETE key

21. Project 8: Creating Style Sheets 21 Linking the Remaining HTML Files to an External Style Sheet Type as the tag Click File on the menu bar and then click Save on the File menu One at a time, open the remaining HTML files, questions.htm and products.htm, and repeat the previous three steps

22. Project 8: Creating Style Sheets 22 Adding an Inline Style Sheet If necessary, click the Notepad button on the taskbar to display the file, welcome.htm Click immediately to the right of the p in the tag on line 31. Press the SPACEBAR and then type style="font-style: italic; font-size: 8pt" as the code Click File on the menu bar and then click Save

23. Project 8: Creating Style Sheets 23 Adding an Inline Style Sheet

24. Project 8: Creating Style Sheets 24 Viewing and Printing Framed Web Pages Click the browser button on the taskbar Click the Blue Cell, Inc. logo in the upper-left corner of the Web page Click File on the menu bar and then click Print on the File menu

25. Project 8: Creating Style Sheets 25 Viewing and Printing Framed Web Pages When the Print dialog box is displayed, click the Options tab Click As laid out on screen and then click the Print button One at a time, click the remaining links, Contact, Products, and Questions, and repeat the previous three steps

26. Project 8: Creating Style Sheets 26 Viewing and Printing HTML Files If necessary, click the browser button on the taskbar. If necessary, click the Home link in the menu frame to display the Welcome Web page (welcome.htm) in the right frame Right-click anywhere on the Welcome page except on a link Click View Source on the shortcut menu After the file welcome.htm is opened in Notepad, click File on the menu bar and then click Print on the File menu. Click the Print button on the Print dialog box

27. Project 8: Creating Style Sheets 27 Viewing and Printing HTML Files Click the browser button on the taskbar, click the Contact link, and then repeat the previous three steps Click the browser button on the taskbar, click the Products link, and then repeat the last three steps on the previous slide Click the browser button on the taskbar, click the Questions link, and then repeat the last three steps on the previous slide

28. Project 8: Creating Style Sheets 28 Quitting Notepad and a Browser Click the Close button on the browser title bar Click the Close button on the Notepad window title bar

29. Project 8: Creating Style Sheets 29 Project Summary Describe the three different types of Cascading Style Sheets Add an embedded style sheet to a Web page Change the margin and link styles using an embedded style sheet Create an external style sheet

30. Project 8: Creating Style Sheets 30 Project Summary Change the body margins and background using an external style sheet Change the link decoration and color using an external style sheet Change the font family and size for all paragraphs using an external style sheet Change table styles using an external style sheet

31. Project 8: Creating Style Sheets 31 Project Summary Use the tag to insert a link to an external style sheet Add an inline style sheet to a Web page Change the text style of a single paragraph using an inline style sheet Understand how to define style classes

32. HTML Concepts and Techniques Fourth Edition Project 8 Complete Creating Style Sheets