The goal of this exercise is the practice using CSS box model related properties.
Due Date and Time
Exercise 4 is due by 5:59pm on February 7th, 2019. I will disable submission at the start of class.
Instructions
Setup
- Download the exercise files from the Box Folder named CS0134-E4-<username> that I shared with you.
- Unzip and copy the ‘CS0134-E4-<username>’ folder onto your flash drive.
- Open style.css in Notepad++.
Goals
Each goal is worth 1 point.
Place all style rules in the style.css file. Do not make any changes to index.html
- Add the stripe.png image in the exercise files as a fixed background image for the html element
- Set the width of the body element to 800px
- Set the margin for the body element to 0 for top and bottom and auto for left and right
- Set the background color of the body element to white
- Add a gradient background image to the body’s header element. Set it for 45degrees and use the three colors #1c2957, white and #cdb87d
- Add padding to the body’s header element to 1em for top and bottom and 0 for left and right
- Set the background color of the ul element to #cdb87d
- Set the width of the ul element to 50%;
- Set the margin of the ul element to 1em for top and bottom and auto for left and right
- Add a grey box shadow to the ul element
- Give the ul element 10px rounded corners
- Set the padding for the article element to 1em for top and bottom and 30px for left and right
Results
Your site should look similar to the following.
How to Submit Your Work
Upload your style.css file to the ‘CS0134-E4-<username>’ Box folder.
Note: When you want to upload a new version of one of your exercise files, click on the file in box and select “Upload New Version”.
I highly recommend that each time you work on this or any other exercise, that you upload your files to Box even if you are not done with the exercise. In this way, if something happens before the submission deadline that keeps you from uploading the finished exercise, there is still something to be graded.