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.
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 on your computer and extract the contents.
Locate the folder “ITCO381_IP2_Starter” (depending on how you extracted the ZIP there may be two folders with this name. Open the first one so that you can see the second one, then continue to the next step. If there’s only one folder, select it and continue to the next step).
In the folder, create a new text document, then rename it to “styles.css” (note that .css replaces the .txt on the end; a confirmation dialog box may appear).
Edit Unit2.htm and styles.css in Notepad++.
In Unit2.htm use the link HTML tag to connect the CSS file to the HTML file.
Your HTML page will need to have the link to the CSS file added and the below updated:
Required: Title: Add your name and IP2
Required: Headings: Your name in the H1, University name in H2, and courses in H3
Required: 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.
Zip (compress) the folder and output screenshots into a .zip file to submit them. Ensure HTML, CSS, and all screenshot images are included.
You will be graded on the following:
Your ability to link the Web page to the CSS
The syntax of the style rules and properties in the CSS
Points will be deducted for the following:
Style rules that incorrectly format the requirements
Any syntax errors that cause the browser to ignore the style rule For more information on Web Page Layout check: https://www.websitebuilderexpert.com/designing-websites/awesome-home-page-design-layouts/