<div class="a-container">
  <h1>Hello Reader</h1>
</div>

<div class="b-container">
  <h1>Hello Reader</h1>
</div>

<div class="c-container">
  <h1>Hello Reader</h1>  
</div>
body {
  margin: 50px auto;
  font-family: "Lato";
  font-weight: 300;
  width: 600px;
}

div.a-container {
  background: #666;
  padding: 20px;
}
div.a-container h1 {
  text-shadow: 0 1px 0 white;
  color: #292929;
  font-size: 4rem;
  text-transform: uppercase;
  text-align: center;
}

div.b-container, div.c-container {
  padding: 20px;
}

div.b-container h1 {
  text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
  color: white;
  font-size: 4rem;
  text-transform: uppercase;
  text-align: center;
}

div.c-container h1 {
  -webkit-text-stroke: 3px black;
  color: white;
  font-size: 4rem;
  text-transform: uppercase;
  text-align: center;
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Lato:[email protected];900&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.