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:

Open the styles.css file.
Add a CSS rule for the body element that sets the background color to #E0E0E2.
Add a CSS rule for the h1 element that sets the text color to: #721817.
Add a CSS rule for the h2 element that sets the text color to: #721817.
Add a CSS rule for the center-text CSS class that aligns the text to center.
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.
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.
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;
}

Programming Assignment: Styling a page

Comments

Frontend Developer

Programming Assignment: Creating an HTML Document

More from this blog

Daily Tech Brief — 06/08/2026

Enrich Metadata and Discovery of Lakehouse Data: Challenge Lab - ARC123

The Arcade Base Camp August 2026

Daily Tech Brief — 05/08/2026

Daily Tech Brief — 04/08/2026

Lab Instructions: Styling a page

Tips: Before you Begin

Task 1: Style an HTML page using CSS..

Final Step: Let's submit your code!

Tips

Command Palette

Comments

Frontend Developer

Programming Assignment: Creating an HTML Document

More from this blog

Lab Instructions: Styling a page

Tips: Before you Begin

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

Task 1: Style an HTML page using CSS..

Final Step: Let's submit your code!

Tips