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.