HTML Concepts and Techniques Fourth Edition Project 8 Creating Style Sheets

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

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

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

Project 8: Creating Style Sheets 5 Style Sheet Precedence

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

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

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

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

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

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

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

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

Project 8: Creating Style Sheets 14 Printing an HTML File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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