How to Reset or Remove CSS Style for a Particular Element
Topic: HTML / CSSPrev|Next
Answer: Use the CSS all Property
You can simply use the CSS all property with the value revert to remove the additional author-defined CSS styling for an element (i.e. reset to browser's default CSS styling).
The CSS all property is supported in all major modern browsers such as Chrome, Firefox, Safari, Edge, etc. Let's try out the following example to understand how it actually works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reset/Remove CSS Styles for Element</title>
<style>
/* Some custom styling */
body {
color: red;
font-size: 18px;
}
.container {
padding: 20px;
border: 1px solid black;
}
h1 {
color: white;
background: black;
}
p {
font-style: italic;
}
/* Revert CSS style of target element and its children */
.reset-style, .reset-style * {
all: revert;
}
</style>
</head>
<body>
<div class="container reset-style">
<h1>This is a heading</h1>
<p>This is a simple paragraph of text.</p>
</div>
</body>
</html>In the above example only the style rules defined for the container and its child elements in the author-defined stylesheet (i.e. custom styling) will be ignored, however it can still inherit properties like color, font-size, etc. from its parent such as the <body> element in our case. To revert the styling of all the elements on a page just apply the .reset-style class directly on the <body> element.
Related FAQ
Here are some more FAQ related to this topic:
