1. HTML, Third Edition--Illustrated Introductory 1 HTML, Third Edition Illustrated Introductory Unit E Formatting with Cascading Style Sheets

2. HTML, Third Edition--Illustrated Introductory 2 U n i t O b j e c t i v e s Explore CSS formatting Control text formatting Set background colors and images Set link properties Explore CSS formatting Control text formatting Set background colors and images Set link properties

3. HTML, Third Edition--Illustrated Introductory 3 U n i t O b j e c t i v e s Apply margins Apply text alignment and format lists Use CSS class rules Use linked style sheets Apply margins Apply text alignment and format lists Use CSS class rules Use linked style sheets

4. HTML, Third Edition--Illustrated Introductory 4 Exploring CSS Formatting Control text formatting Set background properties Control page margins and spacing Control element alignment and decoration Format multiple pages within the same site

5. HTML, Third Edition--Illustrated Introductory 5 Exploring CSS Formatting

6. HTML, Third Edition--Illustrated Introductory 6 Clues to Use Understanding XHTML variations  All documents should contain a document type definition (DTD) tag  XHTML flavors XHTML StrictXHTML Strict XHTML TransitionalXHTML Transitional XHTML FramesetXHTML Frameset

7. HTML, Third Edition--Illustrated Introductory 7 Controlling Text Formatting Copy the pm_bkgnd2.gif, pm_bul1.png, and pm_bul2.png files, then paste them into the paradise\images folder In your text editor, open htm_E-1.txt and inspect the code Save the file as activities.htm in the paradise\activities folder, replacing the existing activities.htm file if prompted

8. HTML, Third Edition--Illustrated Introductory 8 Controlling Text Formatting Click before, then type the following code, pressing [Enter] after each line: <!-- --> Click after <!--, press [Enter], then type the following code, pressing [Enter] after each line: body{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #333366; line-height: 2em; } Save the activities.htm file, start your browser, then open activities.htm

9. HTML, Third Edition--Illustrated Introductory 9 Controlling Text Formatting

10. HTML, Third Edition--Illustrated Introductory 10 Setting Background Colors and Images Click the text editor program button to return to your source code, click just before } in the body rule of your embedded style sheet, then press [Tab] Type the following code, pressing [Enter] after each line, save your work, then preview it in your browser: background-image:url(../images/pm_bkgnd2.gif); margin-left: 0px; margin-top: 5px; margin-right: 0px;

11. HTML, Third Edition--Illustrated Introductory 11 Setting Background Colors and Images Select the color code in the color declaration, type #FFFFFF;, press [Enter], press [Tab], type background-color: #336699;, then save your file Click the browser program button on the taskbar, then click the Reload/Refresh button to preview your updated file Click the text editor program button, change the color value to #333366;, change the background color to #FFFFFF;, then save your work and view the page in your browser

12. HTML, Third Edition--Illustrated Introductory 12 Setting Background Colors and Images

13. HTML, Third Edition--Illustrated Introductory 13 Setting Link Properties Click the text editor program button on the taskbar, click just after the closing } at the end of the body CSS rule, then press [Enter] twice Type the code shown below, pressing [Enter] after each line: a:link{ font-weight: bold; color: #006699; text-decoration: underline overline; } a:visited{ color: #666699; text-decoration: underline overline; } a:hover{ font-style: italic; font-weight: bold; color: #CC0000; text-decoration: underline overline; } a:active{ font-style: italic; font-weight: bold; color: #FF0000; text-decoration: underline overline; }

14. HTML, Third Edition--Illustrated Introductory 14 Setting Link Properties Save your work, click the browser program button on the taskbar, then reload your activities.htm page Move the mouse pointer over each link, then click to test each one

15. HTML, Third Edition--Illustrated Introductory 15 Setting Link Properties

16. HTML, Third Edition--Illustrated Introductory 16 Applying Margins Return to your page code, click just after the } that closes the active link rule, press [Enter] twice, then type the following code, pressing [Enter] after each line: h1{ font-family: Century Schoolbook, Times New Roman, Times, serif; color: #336633; font-size: 36px; margin: 0px; }

17. HTML, Third Edition--Illustrated Introductory 17 Applying Margins Press [Enter] twice, then type the following code, pressing [Enter] after each line: img{ margin-right:ƒ25px; } Press [Enter] twice, then type the following code, pressing [Enter] after each line: div{ margin-left:ƒ40px; margin-right:ƒ40px; } Locate the line at the beginning of the navigation bar code that begins [, click just before, then type Move to the end of the source code, click just before the closing body tag, type, press [Enter], then save the file Preview the page in your browser

18. HTML, Third Edition--Illustrated Introductory 18 Applying Margins

19. HTML, Third Edition--Illustrated Introductory 19 Applying Text Alignment and Formatting Lists Return to your text editor Locate the h1 style rule you created earlier, click just after the } that closes the rule, press [Enter] twice, then type the following code, pressing [Enter] after each line: h2{ font-family: Century Schoolbook, Times New Roman, Times, serif; color: #000066; font-size: 28px; text-align: center; }

20. HTML, Third Edition--Illustrated Introductory 20 Applying Text Alignment and Formatting Lists Click after } of the level-two heading rule, press [Enter] twice, then type the following code, pressing [Enter] after each line address{ text-align: center; } Click after } of the division rule, press [Enter] twice, then type the following code, pressing [Enter] after each line: ul{ list-style-image: url(../images/pm_bul1.png); } Save your page, then view it in your browser

21. HTML, Third Edition--Illustrated Introductory 21 Applying Text Alignment and Formatting Lists

22. HTML, Third Edition--Illustrated Introductory 22 Using CSS Class Rules Return to your code, click just after } that ends the unordered list rule, press [Enter] twice, then type the following code, pressing [Enter] after each line:.second_bul{ list-style-image: url(../images/pm_bul2.png); } Locate the opening tag above the line of code that begins join us poolside, click inside the tag just after ul, press [Spacebar], then type class=”second_bul”

23. HTML, Third Edition--Illustrated Introductory 23 Using CSS Class Rules Apply the second_bul class to the opening tags of the second-level unordered lists that start above the following list items: “Looking for someone,” “Resort counselors are on hand,” “Every afternoon from 1 - 3 p.m.,” “Skilled skateboarders,” “Your evening begins,” and “Join your fellow guests,” then save your work and view it in your browser

24. HTML, Third Edition--Illustrated Introductory 24 Using CSS Class Rules Return to your code, click in the embedded style sheet just after the closing } following the.second_bul class selector rule, press [Enter] twice, then type the following code, pressing [Enter] after each line:.nav1{ text-align: center; } Locate the navigation bar code, click after <p in the paragraph tag just after the <p, press [Spacebar], type class=”nav1”, then save your work and view your page in your browser

25. HTML, Third Edition--Illustrated Introductory 25 Using CSS Class Rules

26. HTML, Third Edition--Illustrated Introductory 26 Using Linked Style Sheets Return to your code, locate the opening style tag in the head section of your document Click and drag through the embedded style sheet from “body” through the } following the.nav1 style class, then copy it to the Clipboard Open a new instance of your text editor, click anywhere in the empty document, then paste the code you copied from the Clipboard into the new document Save your file as paradise_style.css, using the All Files format, in a new root-level folder that you create called css Open the file htm_E-2.txt, save it as schedule.htm in the Paradise\activities folder, then preview it in your browser

27. HTML, Third Edition--Illustrated Introductory 27 Using Linked Style Sheets Return to your schedule.htm page code, click in the head section before, type, then press [Enter] twice to insert a link to the external style sheet Locate the navigation bar near the top of the page, click inside the paragraph tag just after, press [Spacebar], then type class=”nav1” Replace Your Name after “Page modified by” at the bottom of the code with your own name, save the file, print the code, then view the page in your browser Close your browser and text editor

28. HTML, Third Edition--Illustrated Introductory 28 Using Linked Style Sheets

29. HTML, Third Edition--Illustrated Introductory 29 U n i t S u m m a r y Explore CSS formatting Control text formatting Set background colors and images Set link properties

30. HTML, Third Edition--Illustrated Introductory 30 U n i t S u m m a r y Apply margins Apply text alignment and format lists Use CSS class rules Use linked style sheets