please help me write the code for this Lab 2: Creating an External Style Sheet for Cycle Out Cancer Problem: You are part of a philanthropic group of motorcyclists, Cycle Out Cancer, who participate in community events and parades to distribute cancer awareness information. You have created content for the rst four webpages of their website and updated the links in the nav section for each page. In this exercise you will create an external style sheet and link it to the four pages as shown in Figures 4 48 through 4 51.

Instructions: Perform the following tasks: 1. Open the cyclehome04.html, cycleabout04.html, cycleevents04.html, and cyclefaq04.html les in your HTML editor from the Data Files for Students and then modify the comment at the top of each page to include your name and todays date. 2. Start a new le in your text editor, and save it in the lab2\styles folder with the name cyclestyles04.css 3. Enter a CSS comment as the rst line of the external style sheet with your name and todays date. 4. Enter the styles to apply a uniform black text color, Calibri and sans-serif font, and an orange (#FF9900) background color to the body. 5. In the head section of each of the four cycle HTML documents, enter an element to connect the page to the external style sheet. Save and then open or refresh each page in a browser to make sure that the stylesheet is correctly connected to the HTML les. Note that in this exercise, the style sheet is saved in the styles folder, so that path needs to be included in the href value.

6. Center the content by adding

and

tags to surround the content in the wireframe, and then apply styles to center the content within the

and

tags as follows: a. In each HTML page, insert the

opening tag just after the opening tag. b. In each HTML page, insert the

closing tag and comment just before the closing tag. c. In cyclestyles04.css, add the styles to constrain the wrapper to 80% of the width of the window and to center the content within the wrapper. Save all les and then open or refresh the pages in a browser to make sure that the content is centered within 80% of the browser window. (Hint: Note that a nav section to link to each of the four pages follows the image on each page.) 9. On the cyclehome04.html and cyclefaq04.html pages, you want to oat the image in the header to the right. On the cycleevents04.html and cycleabout04.html pages, you want to oat the image in the header to the left. Complete these tasks as follows: a. Create styles in your style sheet with a selector that addresses the class names of oatleft and oatright. (Hint: A class="floatleft" attribute and value in the HTML document is referenced by a .floatleft selector in the CSS le.) b. Add two declarations to both the selectors. The rst will oat the content either left or right. The second will add a 2% margin to the inside edge of the content. For example, the declarations for the .oatleft selector would be: .floatleft { float: left; margin-right: 2%; } Complete the declarations for the .oatright selector to make the image oat right and add a 2% margin to the left side. c. Add class="floatleft" to the opening img tag in the cycleevents04.html and cycleabout04.html pages. d. Add class="floatright" to the opening img tag in the cyclehome04.html and cyclefaq04.html pages. e. Save all les and refresh them in your browser. 11. Remove the bullets from the list items only in the nav section by adding the following style: nav ul { list-style-type: none; } (Hint: In this example, you are using a descendant selector. Only the ul content within the nav content will be affected.) Save and refresh les and review them in your browser to make sure that only the bullets for the ul content within the nav section were removed.) 12. Create one more class named boldtext for the questions on the cyclefaq04.html page as follows so that you can style the questions in bold: a. Add class="boldtext" to the opening

tag for the ve questions immediately below the

Frequently Asked Questions and Answers

heading in the cyclefaq04. html le. b. Add a style in the cyclestyles04.css le to apply bold to the content that is identied by the boldtext class as follows: .boldtext { font-weight: bold; }

13. You also decide to bold the dt (denition term) content on the cyclefaq04.html page. Given you already have a declaration to apply bold, change the selector to include both the content identied by the boldtext class as well as the content marked up by the dt tag as follows: .boldtext, dt { font-weight: bold; } 14. Validate your four HTML pages and x any errors. 15. Validate your CSS code and x any errors. 16. Save and open the pages within a browser as shown in Figures 4 48, 4 49, 4 50, and 4 51. 17. Submit your assignment in the format specied by your instructor. 18. Compare the selector of nav ul (step 11) to the selector of .boldtext, dt (step13). One contains a comma and one does not. What is the signicance of the comma? (Hint: Search for information on CSS grouping selectors and descendant selectors.)

Cycle Out Cancer We Ride So Others May Live Horme About is Evens: Gencer fige: Survivor Stories Seeing the parade of motorcycles from all over the United States was super exciting. They brought pins and patches from all over the United States and put them on a sash to decorate my wheeichair: After so many days of pain and boredom. seeing the Cycle Out Cancer riders was a real thrili Jennifer Ispent 10 days in the hospital just crying. The Cyele Out Cancer givs were so colorful and generous. They gave the hospital a very generous donation in my name and showed me that even strangers care about me. - Kristen Ihad the good fortune to meet several Oycle Out Cancer guys. Everyone has been touched by cancer. Thev are out there doing something about it. FFitz As soon as mu treatments are over, Ifm getting a Spyder motorcycle to ride with Cycle Out Cancer. Can't waitl * Scott. 7 Steps Every Cancer Patient Should Take 1. Lean on friends that can see this through. 2. Seek as much knowiedge as possible. 3. Treat your doctor and care givers as your beit allies. 4. If the istuation is grave, get a second and third opinion. 5. Embrace your treatment plan. This is how you will get well. 6. Be prepared to change. 7. Fill your body with good food and vour mind with positise thoughts. Blood and Organ Donation. Cycle Out Cancer We Ride So Others May Live About Us Cycle Out Cancer is a volunteer organization that promotes cencer awareness, Cycle Out Cancer was founded by a group of three motorevcle enthusiaste from Kansas city who each found their lives interrupted by something else they unforturately shared in cormmoni cancer Each made a vow to the other to fight their different forms of cancer to the best of their ability and some day, "ride again." After a three years and countless medical procedures, their dream came true in May of 2000 when the threesome made their way from Kanses City to gronson. Missouri. At every stop in the short journev the three friends shared their amaring stories of how they fought their cancers. Over time. more snd: more people have joined their rides. Now Cycle out Cancer is one of the larsest ail valunteer motorevcle clubs in the midwest. Anyone who is a motorcyde enthusiast is welcome to join. Many say that the best part of the vide are the inspiring stories ahared by the member at the finish ine. Figure 4-49 Cycle Out Cancer We Ride So Others May Live Home Alavilu Evanf: Cincer Fs. Manthly Rides First Friday of the Month - May - June - July + Aug-Septembor The first Friday of these months we honoc past members who have had cancer but are no longer with us. Qur route may include a lunch at their favorite watering hole, a visit to their survivingsspouse, or avisit to the cemetary to decorate their grave. Contacticycle. Out Cancer for inore information on commemorative rides in your area. Rider Safety All riders must adhert to basic safety rules while on cur rides: 1. Gear upt Wear an approved helmet and protective clothing appropriate for the weather. 2. Maintain the big stuff, Check vaur tires, breaks, fluids, electronics, and frame before each ridet. 3. Check the litile stuff: Make sure your lights, blinkers, mirrors, and stards all work correctly. 4. Obey all traffe laws, lights, and signs. 5. Drive defensively and respectiolly even whin others do not. Rides and Activities Rides and sctivities are currently being planned for theso hospitals in the coming year: Gontact Grele Out Cancter for up-to-date schedules. - Dena-Farber/Brigham and Women's Cancer Center, Boston MA - Memorial Sloan Kettering Cancer Center. New Yori NY. - Mayo Clinic, Rochester MRN - Univaraity of Texas MD Anderson Caincer Ceriter, Houston TX: Contect Gyele But Cancer Cycle Out Cancer We Ride So Others May Live Frequently Asked Questions and Answers What is eascen : Cancer is a cenmen namie for aiseasec eharacterited by the uncontrobled growth of absormal cels. How does cancer itart? The specifit reasons cancer starts very seatly from indilidual to individjal as well as betwean the dHerent types of cancers. Howewa, scientefic studies radietion or to taxie substances such as ashestos, ind even certain viruses. Is cancer a contapious diseose? Studies haye not shown cencer to be contapoun ahhough ceitan cancers do seem to run in families such ss begat carcer. is it possible to prevent cancer? While there are no certain woys to prevens cancer, studies heve proven that poople with healthy dizts and lifestyles wes iebs iltely to got cancer than those. do not. What are the early watning signs of enicee? symptoms at all. These warring sizns should be checked out by a doctor. - a sare or ulaer that doesit theal - unusoal eleedins - go unasual thidhening or lume - charge in a wart or mole - axr persistent pun, feres or phrsical limstanion Key Terminology. benior beaper not carcerpus beapsy cancer a disease wherecelts frow atrormally carcinosenesls the process of narmal tels becoming malgrart cells cure: maligant cancerour colis metastasis sprehid of cancen cefle frotri primary aika to a d stanit shit oncalogr stud of cancer? Contuct Grele Out Cantes: Figure 4-51