1. Starting BBEdit (Notepad) and Opening an HTML File Open the Public Folder Start Notepad or BBEdit Click File on the menu bar, and then click Open In the Project 7 folder, open menu.htm

3. Adding an Embedded Style Sheet

4. Setting the Paragraph Style P {text-indent: 8pt}  Indents the first word of each paragraph 8 points from the left edge of the browser window You can specify a fixed value in inches, centimeters, or pixels You can specify a relative value for a text indent using a percentage

5. Setting a Style for All Links Text-decoration  Blink  Line-through  Overline  Underline You can apply multiple text-decorations: {text-decoration: underline overline}

6. Setting a Style for All Links Font-family property  Allows you to define a font for use in a Web page  Best to specify more than one font-family value {font-family: “Times New Roman”,Verdana} Font-size property Color property

7. Adding an Embedded Style Sheet Click line 4 and then press the ENTER key

8. Enter the CSS code on the following slide

10. Saving an HTML File Click “Save As” and save your changes to menu.htm Click the Save button in the Save As dialog box

11. Viewing an HTML File in the Browser Start your browser Open index.htm

13. Printing an HTML File Click the Notepad button on the taskbar or click on BBEdit in the dock Click File on the menu bar and then click Print

15. Adding an External Style Sheet Ideal for giving multiple pages in a Web site a common look Two-part process  Create the external style sheet  Link the style sheet to the Web page tag

16. Setting a Body Style BODY {margin:8pt}  The margin is the amount of transparent space between elements on the page  Can set margins for individual sides  Can be set as a fixed or relative length Background-color property  Sets the background color of the Web page Can be referenced by RGB code, hexadecimal, or color name

17. Setting a Table Style TABLE {font-family: Verdana, Garamond; font-size: 11pt } TH {color: navy} Oblique font  Font style that is slanted to the right by the browser when the font itself does not provide an italic version

18. Creating an External Style Sheet If necessary, click the Notepad button on the taskbar or BBEdit in the dock. Click File on the menu bar and then click New Enter the CSS code on the following slide

20. Creating an External Style Sheet Click File on the menu bar and then click Save As. Type styles1.css in the File name text box.

22. Linking to an External Style Sheet You must include a link tag in each of the pages to which you wish to apply the external style sheet

23. Linking to an External Style Sheet If necessary, click the Notepad button on the taskbar or BBEdit in the dock Click Open and open calendar.htm

24. Linking to an External Style Sheet Click line 4 and then press the ENTER key Type and then press the ENTER key

26. Saving and Printing an HTML File Save the file with calendar.htm as the file name Click File on the menu bar and then click Print

27. Page without External Style Sheet Page with External Style Sheet

28. Adding a Tag and Saving the Remaining HTML Files Open contact.htm in the the Project 7 folder Click line 4 and then press the ENTER key

29. Adding a Tag and Saving the Remaining HTML Files Type and then press the ENTER key Click File on the menu bar and then click Save As. Type contact.htm in the File name text box. Click the Save button in the Save As dialog box

30. Adding a Tag and Saving the Remaining HTML Files One at a time, open the remaining HTML files, services.htm, staff.htm, and welcome.htm, and repeat the last three steps, replacing the file name appropriately