The Web Design Survival Guide | Units of Measure

by todaly1

HTML

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Title of the document</title>
  <link rel="stylesheet" href="css-box-model-3.css">
  </head>
  <body>
    <div class="box-4-parent-element">Box 4
     <div class="box-3-percentages">Box 3
      <div class="box-2-ems">Box 2
       <div class="box-1-pixels">Box 1
        </div>
      </div>
     </div>
    </div>
</body>
</html>

CSS

.box-1-pixels{
     width: 90px;
     height: 90px;
     padding: 12px;
     margin-top: 12px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: auto;
     border: 1px solid aqua;
     text-align: center;
     background-color: black;
     color: white;
     font-size: 10px;
     font-family: Helvetica, Arial, "sans-serif";
   }

  .box-2-ems{
     width: 18em;
     height: 18em;
     padding: 1.2em;
     margin-top: 1.2em;
     margin-right: auto;
     margin-bottom: 0em;
     margin-left: auto;
     border: 1px solid #00ffff;
     text-align: center;
     background-color: #666666;
     color: #ffffff;
     font-size: 1em;
     font-family: Helvetica, Arial, "sans-serif";
   } 

  .box-3-percentages{
     width: 75%;
     height: 75%;
     padding: 4%;
     margin-top: 4%;
     margin-right: auto;
     margin-bottom: 0%;
     margin-left: auto;
     border: 1px solid rgb(0,255,255);
     text-align: center;
     background-color: rgb(136,136,136);
     color: rgb(255,255,255);
     font-size: 100%;
     font-family: Helvetica, Arial, "sans-serif";
   }

  .box-4-parent-element{
     width: 360px;
     height: 360px;
     padding: 12px;
     margin-top: 12px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: auto;
     border: 1px solid rgba(0,255,255,1);
     text-align: center;
     background-color: rgba(0,0,0,.2);
     color: rgba(0,0,0,1);
     font-size: 62.5%;
     font-family: Helvetica, Arial, "sans-serif";
   }