course material

1. Cascading Style Sheets (CSS)
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. 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.zi
p 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