<div class="content">
<p>Content inherits 'Arial' font and orange color from body</p>
<h2>H2 inherits orange color, but adopted a <span>new font!</span></h2>
</div>
body {
font-family: "Arial", sans-serif;
color: orange;
}
.content {
/* Inherits font-family and color from body */
}
.content h2 {
/* Also inherits those traits, unless explicitly changed */
font-family: "Times New Roman", serif;
span {
color: white;
}
}
/* Other layout rules not directly related to the example */
body {
margin: 0px;
height: 100svh;
display: grid;
place-content: center;
background: #0d3b66;
padding: 2rem;
box-sizing: border-box;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.