<div class="module">
  <div class="inherit">
  <h1>Inherited Styles</h1>
    <p>These styles are being inherited by the <code>.module</code> class since it is the parent.</p>
  </div>
</div>

<div class="module"> 
  <div class="initial">
  <h1>Initial Styles</h1>
  <p>These styles are being reset to the initial property values set by the browser defaults.</p>
  </div>
</div>

body {
  background-color: #eaeaea;
  display: flex;
}

.module {
  background-color: #fff;
  border: 1px solid #ddd;
  color: red;
  font-family: Helvetica;
  font-size: 18px;
  padding: 20px;
  width: 50%;
}

.inherit {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

.initial {
  color: initial;
  font-family: initial;
  font-size: initial;
}

.initial h1 {
  color: initial;
}