CSS - unset
The CSS keyword unset, when applied to a property, sets it to the inherited value, if the property is naturally inherited from its parent; else to the initial value, in case of absence of inheritance.
The keyword unset can be applied to any CSS property, including the CSS shorthand property all.
CSS unset - Basic Example
In the following example, the CSS keyword unset is applied to the margin-top, font-size, and color properties for the elements h1, p, and ul.
This keyword resets these properties to their inherited values, allowing these elements to inherit or fall back to the default styles defined by the browser or parent elements.
<html> <head> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color:red; } header { background-color: #333; color: white; padding: 10px; text-align: center; } nav { background-color: #555; color: white; padding: 10px; text-align: center; } .content { margin: 20px; padding: 20px; background-color: #fff; border: 1px solid #ddd; } .sidebar { width: 150px; background-color: #eee; padding: 10px; float: left; } .main-content { margin-left: 220px; } .footer { clear: both; background-color: #333; color: white; text-align: center; padding: 10px; } h1, p, ul { margin-top: unset; font-size: unset; color: unset; } ul { list-style-type: none; padding: 0; display: flex; } li { margin: 10px; } </style> </head> <body> <header> <h1>Header</h1> </header> <nav> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> <div class="content"> <div class="sidebar"> <h2>Sidebar</h2> <p>This is a sidebar content.</p> </div> <div class="main-content"> <h2>Main Content</h2> <p>This is the main content area with various elements.</p> </div> </div> <div class="footer"> <p>Footer</p> </div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google