CSS - initial

Quiz

The CSS keyword initial assigns the default value of a property to an element and can be used for any CSS property, including the shorthand property all.

If you set all to initial, all CSS properties can be reset to their default values at the same time, simplifying the process compared to resetting each property individually.
For inherited properties, the initial value can be surprising. It's preferred to use alternatives such as inherit, unset, revert or revert-layer keywords.

CSS initial - Basic Example

In the following example, the color: initial; property within the .content class sets the text color of the content area to its initial value, overriding any previous color declarations.
This ensures that the text color within the content section reverts to the default color specified in the browser's stylesheet or user agent stylesheet.

<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: red;
    }
    header {
      background-color: #050505;
      padding: 10px;
      text-align: center;
    }
    .content {
      margin: 20px;
      padding: 20px;
      background-color: #fff;
      border: 1px solid #ddd;
      color: initial; 
    }
    p {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <header>
    <h1>Header</h1>
  </header>
  <div class="content">
    <h2>Main Content</h2>
    <p>This is the main content area with various elements.</p>
    <p>The text color of this paragraph is set to its initial value.</p>
  </div>
</body>
</html>

Print Page