Description Part 1: (30%) Below is a sample Embedded Style Sheet. Explain/describe each line of code from 1 – 10. Complete in Microsoft Word. Please be detailed: 1. <style type=”text/css”> 2. h1 3. { 4. color: #cd5c5c; 5. font-size: 14px; 6. font-family: Verdana, sans-serif; 7. text-transform: uppercase; 8. } 9. /*my css code*/ 10. </style> Part 2: (70%) For this assignment, you are required to reproduce the Natures Bounty website with the images and files provided. This will help you learn the use and application of CSS in a practical way. Click the link below to download the zip folder for this assignment – Natures Bounty. Download Natures Bounty zip folder here>> In the NaturesBounty.zip zip folder, http://media15live.com/bhcc_htmlonline_class_notes/assignments/zips/NaturesBounty.zip you will find 5 files including: A layout of a completed page for Nature’s Bounty – natures_bounty.jpg The HTML file for the Nature’s Bounty home page – index.htm 3 images of the CSS code needed for the Nature’s Bounty home page – 1_stylepage.jpg, 2_stylepage.jpg, 3_stylepage.jpg Complete this project as follows: Create a folder for this project on your computer desktop and save (or copy & paste) the index.htm file in this folder. To view the index.htm code, open the file in your text editor and look in the top section (between the head tags). Notice a reference to a CSS source file named stylepage.css. This file does not yet exist but you will create it in the next step. Open a completely blank page in your text editor. The page must have nothing in it. First, save this blank page in your project folder as stylepage.css. After saving, the CSS file will become automatically linked to the index.htm file. Don’t worry, you will understand this better in the next few steps and as you progress in the course. Open the index.htm file in your web browser. You will need to keep the index.htm file open in your browser to complete the next steps. Now type all the code in the 3 image files 1_stylepage.jpg, 2_stylepage.jpg and 3_stylepage.jpg line by line into the blank stylepage.css file you created above. As you type each few lines, save then refresh your browser to see how the CSS is affecting the index.htm. Note again that the stylepage.css is automatically linked to the index.htm file so the CSS effect on the HTML page will be visible to you as you add more CSS code and refresh the browser. Continue to type, save and refresh until you’re done. When you’re done, if you carefully followed the steps above, your index.htm page will look identical to the original natures_bounty.jpg image. If there are errors or something appears missing, review your CSS codes carefully and make corrections. Note on uploading: To view your complete webpage on the server, you must upload both the index.htm and stylepage.css files together.
#Cascading #Style #Sheets #CSS
