Ch. 29 - Styling Hyperlinks

Author: FrankGecko

starter/03-CSS-Fundamentals/notes.html

@@ -91,6 +91,23 @@ <h2>Ch. 27 Working with Colors</h2>
           multiple properties in a single declaration.
         </p>
       </article>
+
+      <article>
+        <h2>Ch. 29 Styling Links</h2>
+        <p>
+          It is not good practice to only use the element-selector for styling
+          links. Links have a few states, that can be selected in CSS by use of
+          specific pseudo-class selectors.
+        </p>
+        <p>Link pseudo-classes are always written in a specific order:</p>
+        <ul>
+          <li>:link</li>
+          <li>:visited</li>
+          <li>:hover</li>
+          <li>:active</li>
+        </ul>
+        <p>It may be useful to think of the acronym LVHA.</p>
+      </article>
     </article>
   </body>
 </html>

starter/03-CSS-Fundamentals/style.css

@@ -112,3 +112,25 @@ li:nth-child(even) {
 /* article p:last-child {
   color: red;
 } */
+
+a:link {
+  color: #1098ad;
+  text-decoration: none;
+}
+
+a:visited {
+  color: #1098ad;
+  text-decoration: none;
+}
+
+a:hover {
+  color: orangered;
+  font-weight: bold;
+  /* text-decoration: underline dotted orangered; */
+  text-decoration: underline orangered;
+}
+
+a:active {
+  background-color: black;
+  font-style: italic;
+}