CSS Fonts Units

by Zuhaib Siddiqui

HTML

<div>
<h1>EM</h1>
  <span class="em"> here will be goes with text 1</span>
  <span class="em"> here will be goes with text 2</span>
  <span class="em"> here will be goes with text 3</span>
  <span class="em"> here will be goes with text 4</span>
</div>

<div>
<h1>REM</h1>
  <span class="rem"> here will be goes with text 1</span>
  <span class="rem"> here will be goes with text 2</span>
  <span class="rem"> here will be goes with text 3</span>
  <span class="rem"> here will be goes with text 4</span>
</div>


<div class="em-inner">
<h1>EM - NESTEST</h1>
<span class="em"> here will be goes with text 1
  <span class="em2"> here will be goes with text 2
    <span class="em"> here will be goes with text 3
      <span class="em"> here will be goes with text 4</span>
    </span>
  </span>
</span>
</div>

<div class="rem-inner">
<h1>REM - NESTEST</h1>
<span class="rem"> here will be goes with text 1
  <span class="rem2"> here will be goes with text 2
    <span class="rem"> here will be goes with text 3
      <span class="rem"> here will be goes with text 4</span>
    </span>
  </span>
</span>
</div>

CSS

html{
  font-size:15px;
}
body{
  font-size:10px;
}
div{
  font-size:20px;
}
.rem{
  font-size:1rem;
  background-color: #cb2800;
}
.rem2{
  font-size:2rem;
  background-color: #cb2800;
}
.em{
  font-size:1em;
  background-color: #e88200;
}
.em2{
  font-size:2em;
  background-color: #e88200;
}
span{
  display:block;
   margin-top:10px;
   color:#fff;
   padding:10px;
}
span span{
  border-top:5px solid #fff;
}