unit 2 individual project for itco381

/in /by

Instructions

Cascading Style Sheets (CSS) are used to provide style, presentation, and layout for the HTML content of a Web page. You will develop an external CSS to provide style, presentation, and layout to an HTML document.

If you have not installed Microsoft Visual Studio Software in a prior course, follow these instructions for installation steps.

Click HERE to download a Project containing HTML and images which will be used as the foundation to build your CSS upon.

Complete the following for this assignment:

  • Download the above file, save it in your ITCO381 folder and extract the contents.
  • In Visual Studio click File > Open > Web Site
  • In Solution Explorer, Right-click the website and choose Add > Style Sheet. Use “styles.css” as the name
  • Your HTML page will need to have the link to the CSS file added and the below updated:
    • Title: Add your name and IP2
    • Headings: Your name in the H1, University name in H2 and courses in H3
    • Paragraphs: Please describe details about the courses that you are taking at the university.
    • Optional – Link: Include links to your favorite websites.
    • Optional – Images: You may update the header image to include a selfie/profile picture and the image in the body to reflect a picture relevant to your courses
  • Add style rules in the CSS file to accomplish the following:
    • Set the width of the page to 700px
    • Use the font family starting with Verdana
    • Set the width of the header image to 200px
    • Float the header image to the right
    • Add a margin of 10px to the header image
    • Change the color and font of the header text
    • Add a border and background color of your choice to the header
    • Ensure the contents of the section does not float into the header
    • Center all headings
    • Ensure paragraph text is not centered
    • Set the width of the paragraph image to 175px
    • Float the paragraph image(s) to the left
    • Add a margin of 10px to the paragraph image
    • Set the nav links to text-decoration:none and change the color
    • Set the nav links to change to a color of your choice when hovered or focus or active
    • Align the footer text to the right
    • Set the footer text to 80% size
  • Validate the CSS style rules.
  • Validate the HTML document, and make sure the CSS updates are showing.
  • Take screenshots of the Web page.
  • Zip (compress) your Visual Studio project folder and output screenshots into a .zip file to submit them. Ensure HTML, CSS, and images are all included.

Grading