CSS - initial

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>
Advertisements