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 tocenter
.Add a CSS rule for the HTML element with the id
logo
. Set its left and right margins toauto
and changes its display to ablock
element.Add a CSS rule for all
span
elements that are children ofh2
elements that sets the text color to#FA9F42
and its font size to0.75em
.Add a CSS rule for the HTML element with the id
copyright
. Set its top padding to12
pixels and its font size to0.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;
}