Added note for blockquotes and fixed another longstanding visual bug with margin on the first item of a blockquote

Author: btholt

lessons/03-thoughts-on-js-and-css/A-css.md

@@ -3,4 +3,6 @@ title: "CSS"
 description: "CSS is for styling"
 ---
 
-CSS is important
+> 💡 Did you know that CSS is an acronym for Completely Spontaneous Spacing
+
+Use blockquotes for callouts.

styles/courses.css

@@ -338,6 +338,10 @@ blockquote > *:last-child {
   margin-bottom: 0;
 }
 
+blockquote > *:first-child {
+  margin-top: 0;
+}
+
 .lesson-content img {
   max-width: 100%;
 }
@@ -361,7 +365,7 @@ blockquote > *:last-child {
 .lesson-text {
   width: 100%;
   padding: 25px 5px 25px 35px;
-  min-height: 200px
+  min-height: 200px;
 }
 
 .sections-name {
@@ -469,8 +473,8 @@ ol.sections-name .lesson-details {
   }
 
   ol.sections-name .lesson-preface {
-    font-size:60px
-   }
+    font-size: 60px;
+  }
 }
 
 .lesson-details h3 {
@@ -521,7 +525,7 @@ ol.sections-name .lesson-details {
 
 code,
 pre code {
-  padding: .5rem;
+  padding: 0.5rem;
 }
 
 code,
@@ -537,27 +541,27 @@ pre code.hljs {
 }
 
 pre {
-    position: relative;
+  position: relative;
 }
 
 .div-copy {
-    position: absolute;
-    top: 0;
-    right: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 
 .div-copy .tooltip-copy::after {
-    content: "";
-    position: absolute;
-    right: 100%;
-    margin-right: -4px;
-    top: 60%;
-    transform: translateY(-50%);
-    border-style: solid;
-    border-width: 2px 2px 5px 8px;
-    border-color: transparent transparent transparent #444;
-    opacity: 0;
-    transition: opacity .3s;
+  content: "";
+  position: absolute;
+  right: 100%;
+  margin-right: -4px;
+  top: 60%;
+  transform: translateY(-50%);
+  border-style: solid;
+  border-width: 2px 2px 5px 8px;
+  border-color: transparent transparent transparent #444;
+  opacity: 0;
+  transition: opacity 0.3s;
 }
 
 .div-copy .tooltip-copy::before {
@@ -573,14 +577,15 @@ pre {
   color: #fff;
   text-align: center;
   opacity: 0;
-  transition: opacity .3s;
+  transition: opacity 0.3s;
 }
 
 .div-copy .tooltip-copy {
-    margin-right: 0.3em;
-    margin-top: 0.3em;
+  margin-right: 0.3em;
+  margin-top: 0.3em;
 }
 
-.div-copy.clicked .tooltip-copy::before, .div-copy.clicked .tooltip-copy::after {
-    opacity: 1;
+.div-copy.clicked .tooltip-copy::before,
+.div-copy.clicked .tooltip-copy::after {
+  opacity: 1;
 }