Positioning HTML Contents - Part 2

Introduction

Welcome to the Positioning HTML Contents - Part 2 Practice Lab. In this module, you will be provided with the instructions and devices needed to develop your hands-on skills.

Exam Objectives

The following exam objective is covered in this lab:

5.1 Construct and analyze styles that position content

Lab Duration

It will take approximately 20 minutes to complete this lab.

Exercise 1 - Working with CSS Positioning Properties

The CSS positioning properties such as max-width, align, overflow, and visibility help to design the layout of HTML pages. You can set the maximum width, alignment, and visibility of the elements using the positioning properties. You can control the display of the content in elements using the overflow property.

In this exercise, in the first task, you will download the Visual Studio Code workspace from the Intranet and extract it.

In the second task, you will add code in styles.css to define the positioning properties. You will also add code in blog.html to apply the styles to the elements on the Blog page.

Learning Outcomes

After completing this exercise, you will be able to:

Apply CSS positioning properties to elements in HTML pages