The Web Design Survival Guide | CSS Color

by todaly1

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
  </head>
  <body>
    <div class="box-4-rgba-color">Box 4
     <div class="box-3-rgb-color">Box 3
      <div class="box-2-hex-color">Box 2
       <div class="box-1-keyword-color">Box 1
        </div>
      </div>
     </div>
    </div>
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

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

.box-2-hex-color {
 width: 180px;
 height: 180px;
 padding: 10px;
 margin-top: 10px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 border: 1px solid #00ffff;
 text-align: center;
 background-color: #666666;
 color: #ffffff;
 font-size: 12px;
 font-family: Helvetica, Arial, "sans-serif";
 } 
 
.box-3-rgb-color {
 width: 270px;
 height: 270px;
 padding: 10px;
 margin-top: 10px;
 margin-right: auto;
 margin-bottom: 0px;
 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: 12px;
 font-family: Helvetica, Arial, "sans-serif";
 }
 
.box-4-rgba-color {
 width: 360px;
 height: 360px;
 padding: 10px;
 margin-top: 10px;
 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: 12px;
 font-family: Helvetica, Arial, "sans-serif";
 }