<div class="wrapper">
    <article class="flow">
      <h1>Controlling and utilising inheritance</h1>
      <p>The <strong>bold elements inside a <code>&lt;strong&gt;</code></strong> have a <code>font-weight</code> of <code>900</code> by default. </p>
      <div class="my-component">
        <p>This text is in a component called <code>.my-component</code>, which has a <code>font-weight</code> of <code>500</code>. </p>
      <div class="my-component">
        <p><strong>This <code>&lt;strong&gt;</code> element is inside <code>.my-component</code>. It inherits the <code>500</code> weight because it’s <code>font-weight</code> is set to <code>inherit</code>.</strong></p>
strong {
  font-weight: 900;

.my-component {
  font-weight: 500;

.my-component strong {
  font-weight: inherit;

/* System font stack to show the difference in weights */
body {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
    helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;

External CSS

  1. https://codepen.io/web-dot-dev/pen/gOgYqvz.css

External JavaScript

This Pen doesn't use any external JavaScript resources.