Assignment 5: Cascading Style Sheets - CSS

WEB222 - Assignment 5: Cascading Style Sheets - CSS
Grade value: 5% of your final course grade
Objective
Practice Styling elements, page layout and image gallery with CSS.
Specifications
This assignment contains two parts - part A and part B. In part A you’ll work on basic CSS
coding tasks. In part B you’ll play on page layout and basic tasks of image gallery and so on.
Download and unzip the assignment5-template.zip file from Blackboard and there will be
the folders partA and partB in the package. Complete the tasks in the following two parts.
Part A
In the folder partA, work on the ontario.html and/or css/partA.css files and create CSS
rules base the following specifications. Ether internal or external CSS can be used for
creating these rules.
1. Create a CSS rule to set the page width to 80% and horizontally centered. Hint: you
can use ether body or .main-container as CSS selector, and set property margin with
value auto.
2. For text of all level-2 headings, create a CSS rule to set text color to dark blue and
background color to #cccccc (using tag selector).
3. For the paragraph with id="paragraph2", create a CSS rule to set font family to "Comic
Sans MS", "Comic Sans", "cursive", set font size to 20pt (using ID selector).
4. For all span element with class="on", create a CSS rule to set text color to #5cb85c,
font weight to bold, and text decoration to underline (using class selector).
5. For table within div element with id="section2", create a CSS rule to set background
image to https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX23025384.jpg,
repeat, and set text color to #2f4f4f (using ID and contextual selector).
2
6. For both thead and tfoot, create a CSS rule to set background color to rgba(255, 255,
0, 0.6), which is a RGB color with opacity, and set font style to italic (using group
selector).
7. Create a CSS rule to change the color of any paragraph in the document to blue color
using hexadecimal value when the cursor hovers over the paragraph.
8. Create a CSS rule to set the list style type of all unorder list to square, and create
another rule to set the list style type of all order list to lower alpha.
9. Add ©2018 and your full name into the footer and text align it to center.
The screenshot of completed part A: ontario.html
Part B
You are to design and develop a single page website with a single css file. Name the files
storefront.html and sitecss.css and place them in PartB folder. All css rules must go into
sitecss.css. The storefront page will display images of at least 10 similar products with related
information such as title, description, price etc. Be aware of copyright for the images you use.
Refrain from using abusive text or images. You may refer to amazon, ebay, Walmart for
design guidance. However, you are not allowed to direct copy any code from any website.
You will be graded based on creativity. You may make use of online tools such as those
available on css3gen.com.
OTHER REQUIREMENTS
▪ The HTML pages must pass the W3C's HTML Validation.
▪ CSS used in the assignment must pass the W3C CSS validation.
▪ Enclose the following declaration with your name and date at the top of your
sitecss.css file:

3
Assignment submission
▪ Compact your assignment 5 part A and B files including all directory structures into one
zip file named assignment5.zip and submit this file to the Blackboard (My.Seneca).
Important note
▪ NO LATE SUBMISSIONS for assignments. Late Assignment submissions will not be
accepted and will receive a grade of zero (0).
▪ After the end (11pm) of the due date, the assignment submission link on the
Blackboard will no longer available.