css display.html

### CSS DISPLAY ### 
### ADVANCE CSS ###


<!DOCTYPE html>
<html>

<!-- 
  TODO
1. By changing only the display property of the CSS make all 3 squares line up horizontally like in goal1 image.
2. Change only the display property to make all 3 squares line up vertically like in goal2 image. 
-->

<head>
  <title>CSS Display Property Example</title>
  <style>
    p {
      color: white;
    }

    .red {
      display: block;
      width: 200px;
      height: 200px;
      background-color: red;
    }

    .green {
      display: block;
      width: 200px;
      height: 200px;
      background-color: green;
    }

    .blue {
      display: block;
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>
</head>


<body>
  <h1>CSS Display Property</h1>
  <p class="red">Red Paragraph </p>
  <p class="green">Green Paragraph</p>
  <p class="blue">Blue Paragraph</p>
</body>

</html>