Skip to content
hands-on lab

Arranging and Ordering HTML Elements Using CSS

Advanced
45m
75
4/5
Start lab
Get guided in a real environmentPractice with a step-by-step scenario in a real, provisioned environment.
Learn and validateUse validations to check your solutions every step of the way.
See resultsTrack your knowledge and monitor your progress.
Lab description

Cascading Style Sheets (CSS) offers the ability to customize how HTML elements are arranged and ordered on a web page. Floating elements can be used to let text flow around other HTML elements, and setting the Z index allows you to specify the depth order that elements are displayed in.

In this lab, you will see how to use CSS to arrange and order HTML elements.

Learning Objectives

Upon completion of this beginner level lab, you will be able to:

  • Use the float property
  • Use the clear property
  • Use the z-index property

Intended Audience

  • Beginners learning front-end development
  • Software Engineers who need to learn front-end technologies to expand their skillset

Prerequisites

Familiarity with the following will be beneficial but is not required:

  • Cascading Style Sheets (CSS)
  • Hypertext Markup Language (HTML)

The following content can be used to fulfill the prerequisite:

About the author
Avatar
Andrew Burchill, opens in a new tab
Labs Developer
Students
66,317
Labs
163
Courses
2
Learning paths
4

Andrew is a Labs Developer with previous experience in the Internet Service Provider, Audio Streaming, and CryptoCurrency industries. He has also been a DevOps Engineer and enjoys working with CI/CD and Kubernetes.

He holds multiple AWS certifications including Solutions Architect Associate and Professional.

Covered topics
Development
CSS
Lab steps
Floated Images Left and Right
Using the Clear Property
Using the Z-Index Property