first commit

external.css

@@ -0,0 +1,131 @@
+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;
+
+  }