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