adding docs subtree

docs/step1-01/css-demo/css-demo-final.css

@@ -0,0 +1,91 @@
+/* Targeting an HTML tag */
+body {
+  font: 1.2em sans-serif;
+}
+
+/* Targeting an HTML tag */
+h1 {
+  /* Color name */
+  color: black;
+
+  /* 6 digit hex  */
+  background: #ababab;
+
+  /* Margin: property for each side */
+  margin-bottom: 15px;
+  margin-top: 15px;
+
+  /* Shorthand: Padding applies to all sides  */
+  padding: 10px;
+
+  /* 3 digit hex and border shorthand */
+  border: 1px solid #ddd;
+}
+
+/* Overriding inherited styles */
+span {
+  color: #004578;
+}
+
+/* Targeting a class name  */
+.tiles {
+  display: flex;
+}
+
+/* Decendant selector */
+.tiles img {
+  width: 100%;
+}
+
+/* Direct decendant selector */
+.tiles > div {
+  /* rgb colors */
+  background: rgb(10, 10, 10);
+  color: white;
+  flex-basis: 100%;
+  /* Longhand goes clockwise from top
+  10px - all
+  10px 20px - top/bottom left/right
+  10px 20px 15px - top left/right bottom
+  */
+  padding: 10px 20px 15px;
+  margin: 10px 20px 10px 0;
+}
+
+/* Qualified selector */
+div.links {
+  background: #004578;
+}
+
+/* Style inheritance only works for unstyled elements */
+a {
+  color: white;
+}
+
+/* Pseudo hover selector */
+a:hover {
+  color: #ccc;
+}
+
+/* Sibling selectors */
+a ~ a {
+  /* Changing elements from inline to block */
+  display: block;
+}
+
+/* Positional Pseudo Selectors  */
+.tiles > div:last-child {
+  /* overrides margin-right but leaves other margins alone */
+  margin-right: 0;
+}
+
+/* ID selector */
+#contact-form {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Attribute selector */
+input[type='submit'] {
+  margin-top: 10px;
+}