Title: U5L2 CSS Coding Assignment
Course: BC - Web Development 10 - 1.0 > Section: Unit 5 - CSS Intro

This is a significant assignment that has four stages. You will want to keep your files and screenshots organized so that your teacher can assess them appropriately.

Stage 1:

First, you're going to modify your existing City Website to focus on Rome, Italy.

- Create a new folder called U5-Rome.
- Copy your City Website HTML file from Unit 3 into your U5-Rome folder, and rename it to index.html.
  - Note: if your teacher suggested changes to your U3L2 City Website - Checkpoint 3 HTML file when it was assessed, make sure to complete those changes prior to doing this assignment.
- Find the Wikipedia page for Rome, so you can access information on Rome to change out your site
- Change your title, headings, paragraphs, tourism hyperlink, and images in your HTML file to align with the topic: Rome, Italy.
- Properly cite your text and images.
- Add at least three other relevant hyperlinks. The last link should load the Wikipedia page you’re using as a source of information.
- Save and view your file in your browser to make sure all the elements work and that the content is accurate.
- Take a screenshot of your website to submit with the assignment (name this image stage1).

Stage 2:

Now, it's time to move your Inline style attributes to an Internal CSS stylesheet:

- Insert style tags in the head element in your code.
- Move the contents of any style attributes from your code into appropriate rulesets within the style element. If you're not sure how to write a selector to target the elements you want, remember you can add a class. Make sure to check in your browser each time you move a declaration.
- Once you’re satisfied that all CSS declarations have been moved from style attributes into your internal stylesheet, and that your code is correct, save and view your file in your browser.
  - Note: your website should look the same as it did in the previous stage.
- Take a screenshot of your website to submit with the assignment (name this image stage2).

Stage 3:

Next, you will move your CSS into an external stylesheet.

- Create a new text file in your text editor called main.css and place it inside your U5-Rome folder,
- Add a link tag in the <head> of your index.html file, like:
<link rel="stylesheet" href="main.css"/>
- Copy all your CSS from inside your <style> element, and paste it into main.css.
- Now remove the <style> element, and all its CSS from index.html.
- Save and view your file in your browser.
  - Note: your website should look the same as it did in the previous stage.
- Take a screenshot of your website to submit with the assignment (name this image stage3).

Stage 4:

Finally, you're going to style your page using your external stylesheet.

- In main.css, stylize the page with the colours of Italy’s flag (e.g., Use a solid colour for your background; make colour changes to headings, paragraphs, and their backgrounds, etc.).
  - Use at least one each of a class selector, attribute selector, pseudo-class, and a combinator other than the descendant combinator.
- Save your CSS file and refresh your HTML file in your browser.
- Take a final screenshot of your website to submit (name this image stage4).
- Place your screenshots in your U5-Rome folder. Create a zip file of the folder, and upload it.

Marks:

9 - completing all style and content changes

3 - for correct citations

4 - for relevant, working hyperlinks

4 - for screenshots

Total: /20