Copyright Goodheart-Willcox Co., Inc. Chapter 13 Internet and the World Wide Web 545 Creating a Basic External Style Sheet The best practice for formatting a web page is the use of an external CSS. For example, a CSS fi le can be easily created to control the formatting of the AboutMe.html web page created earlier. 1. Launch a web browser, and load the AboutMe.html fi le in the Chap13 folder on your fl ash drive. 2. Launch Notepad or other plain-text editor, and save the fi le as Style.css in the Chap13 folder on your fl ash drive. 3. Enter this code into the CSS fi le. body{ background-color: black } h1{ color: orange text-align: center } p{ font-family: Verdana, Geneva, sans-serif font-size: 18 px color: white } 4. Save the CSS fi le. Be sure it is saved as Style.css. 5. Switch to the web browser, and reload the page. What happens? Nothing changes because the CSS fi le has not been linked to the HTML fi le. 6. Using Notepad, open the AboutMe.html fi le. Note: you will need to open the fi le from within Notepad double-clicking the fi le will not open it for editing. 7. After the html tag, press the [Enter] key to begin a new line, and add the following code. head link rel=“stylesheet” type=“text/css” href=“Style.css” /head 8. Save the HTML fi le. 9. Switch to the web browser, and reload the page. The formatting of the page changes to match what is specifi ed in the CSS fi le. 10. Applying what you have learned, modify the CSS to change the font size of the h1 tag to 75 pixels. Verify the change by reloading the page in the browser. 11. Applying what you have learned, modify the CSS to change the text alignment of the p tag to right-hand justifi ed, and verify the change. Hands-On Example 13.2.3
Previous Page Next Page