LabEx
Log InJoin Free

Reset All Styles

Beginner

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will explore the concept of resetting all styles to default values using the all property. By the end of this lab, you will have a clear understanding of how to use this property to reset all styles, both inherited and non-inherited, to their original values. This will allow you to quickly and easily reset the styling of an element without having to individually reset each property.

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a beginner level lab with a 100% completion rate. It has received a 96% positive review rate from learners.

Reset All Styles

index.html and style.css have already been provided in the VM.

To reset all styles to their default values, use the all property. This property will not affect the direction and unicode-bidi properties. Here's an example of how to use it:

<div class="reset-all-styles">
  <h5>Title</h5>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id
    exercitationem nulla qui repellat laborum vitae, molestias tempora velit
    natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>
.reset-all-styles {
  all: initial;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Reset All Styles lab. You can practice more labs in LabEx to improve your skills.