Q:

How to Reset or Remove CSS Style for a Particular Element

mhmadesk
Save to bookmark
|
2022-05-17
|
  284 
Very Easy
0

How to Reset or Remove CSS Style for a Particular Element

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this 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:

<!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.

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

HTML / CSS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to Set Fixed Width for td Regardless of its Co... >>
<< How to Remove Border from IFrame in HTML...