HTML-CSS: Reset all styles

Last update on March 08 2024 13:34:43 (UTC/GMT +8 hours)

HTML-CSS : Exercise-41 with Solution

Using HTML, CSS resets all styles to default values using only one property.

Use the all property to reset all styles (inherited or not) to their default values.
Note: This will not affect direction and unicode-bidi properties.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS resets all styles to default values using only one property</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<div class="reset-all-styles"><!-- Comment: Creates a div element with the class "reset-all-styles" to apply the reset -->
<h5>w3resource</h5><!-- Comment: Displays the heading "w3resource" -->
<p><!-- Comment: Contains a paragraph of text -->
    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>
</body>
</html><!-- Comment: End of the HTML document -->

Explanation:

HTML:

<div class="reset-all-styles">: Creates a div element with the class "reset-all-styles" to apply the reset to all styles within this div.

<h5>w3resource</h5>: Displays the heading "w3resource".

<p>: Starts a paragraph of text.

Lorem ipsum...: Placeholder text commonly used in web design.

CSS Code:

.reset-all-styles { all: initial; /* Comment: Resets all CSS properties to their initial values */ }

Explanation:

CSS:

.reset-all-styles: Targets elements with the class "reset-all-styles".

all: initial;: Resets all CSS properties to their initial values.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.