main-training/external.css

body {
    background-color: lightblue;
  }

  h1 {
    color: white;
    text-align: center;
  }

  p {
    font-family: verdana;
    font-size: 20px;
  }

  /*
  class selector
  */
  .center {
    text-align: center;
    color: red;
  }

  /* 
  id selector
  */
  #para1 {
    text-align: center;
    color: red;
  }

  /*
  list styling
  */

  ol {
    background: #ff9999;
    padding: 20px;
  
  }

  ul {
    background: #3399ff;
    padding: 20px;
  }

  ol li {
    background: #ffe5e5;
    color: darkred;
    padding: 5px;
    margin-left: 35px;
  }

  ul li {
    background: #cce5ff;
    color: darkblue;
    margin: 5px;
  }

  /*
  margin example
  */

  #margin_example {
    border: 1px solid black;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
    background-color: lightblue;
  }

  /*
  padding example
  */

  #padding_example {
    border: 1px solid black;
    background-color: lightblue;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
  }

  /*
  centering items using margin auto
  */

  #center_table {
    background: #ff9999;
    padding: 20px;
    margin: 50px auto;
    width: 200px;
    height: 100px;
  }

  /*
  centering with flex box horizontally
  */

  .center_horizontal_flex_box {
    font-family: arial;
    font-size: 24px;
    margin: 25px;
    width: 1050px;
    height: 200px;
    outline: dashed 1px black;
    /* Center child horizontally*/
    display: flex;
    justify-content: center;
  }

  .child {
    width: 50px;
    height: 50px;
    background-color: red;
  }

  .center_vertical_flex_box {
    font-family: arial;
    font-size: 24px;
    margin: 25px;
    width: 1050px;
    height: 200px;
    outline: dashed 1px black;
    /* Center vertically */
    display: flex;
    align-items: center;
    justify-content: center;

  }