Lab Instructions: Styling a page

In this exercise you will you will practice applying CSS rules to HTML elements.

Tips: Before you Begin

To view your code and instructions side-by-side, select the following in your VSCode toolbar:

• View -> Editor Layout -> Two Columns

• To view this file in Preview mode, right click on this README.md file and Open Preview

• Select your code file in the code tree, which will open it up in a new VSCode tab.

• Drag your assessment code files over to the second column.

• Great work! You can now see instructions and code at the same time.

Task 1: Style an HTML page using CSS..

Objectives

• Define a CSS rule using an element selector.

• Define a CSS rule using an id selector.

• Define a CSS rule using a class selector.

• Define a CSS rule using a descendant selector.

Follow the Step by Step instructions below:

1. Open the styles.css file.

2. Add a CSS rule for the body element that sets the background color to #E0E0E2.

3. Add a CSS rule for the h1 element that sets the text color to: #721817.

4. Add a CSS rule for the h2 element that sets the text color to: #721817.

5. Add a CSS rule for the center-text CSS class that aligns the text to center.

6. Add a CSS rule for the HTML element with the id logo. Set its left and right margins to auto and changes its display to a block element.

7. Add a CSS rule for all span elements that are children of h2 elements that sets the text color to #FA9F42 and its font size to 0.75em.

8. Add a CSS rule for the HTML element with the id copyright. Set its top padding to 12 pixels and its font size to 0.75em.

Final Step: Let's submit your code!

Nice work! To complete this assessment:

• Save your file through File -> Save

• Select "Submit Assignment" in your Lab toolbar.

Your code will be autograded and return feedback shortly on the "Grades" tab.
You can also see your score in your Programming Assignment "My Submission" tab.

Tips

• If you get stuck, apply the CSS rules one at a time and verify their behaviour is what you expect.

• Review the lessons Selecting and Styling, Text and color in CSS, Different types of selectors, and Box Model Introducction.

---

body {
    background-color: #E0E0E2;
}

h1 {
    color: #721817;
}

h2 {
    color: #721817;
}

#logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

h2 > span {
    color: #fa9f42;
    font-size: 0.75em;
}

#copyright {
    font-size: 0.75em;
    padding-top: 12px;
}

.center-text {
    text-align: center;
}