Skip to content

Commit 2d253e8

Browse files
committed
Ch. 29 - Styling Hyperlinks
1 parent 4eca96a commit 2d253e8

File tree

2 files changed

+39
-0
lines changed

2 files changed

+39
-0
lines changed

starter/03-CSS-Fundamentals/notes.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,23 @@ <h2>Ch. 27 Working with Colors</h2>
9191
multiple properties in a single declaration.
9292
</p>
9393
</article>
94+
95+
<article>
96+
<h2>Ch. 29 Styling Links</h2>
97+
<p>
98+
It is not good practice to only use the element-selector for styling
99+
links. Links have a few states, that can be selected in CSS by use of
100+
specific pseudo-class selectors.
101+
</p>
102+
<p>Link pseudo-classes are always written in a specific order:</p>
103+
<ul>
104+
<li>:link</li>
105+
<li>:visited</li>
106+
<li>:hover</li>
107+
<li>:active</li>
108+
</ul>
109+
<p>It may be useful to think of the acronym LVHA.</p>
110+
</article>
94111
</article>
95112
</body>
96113
</html>

starter/03-CSS-Fundamentals/style.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,3 +112,25 @@ li:nth-child(even) {
112112
/* article p:last-child {
113113
color: red;
114114
} */
115+
116+
a:link {
117+
color: #1098ad;
118+
text-decoration: none;
119+
}
120+
121+
a:visited {
122+
color: #1098ad;
123+
text-decoration: none;
124+
}
125+
126+
a:hover {
127+
color: orangered;
128+
font-weight: bold;
129+
/* text-decoration: underline dotted orangered; */
130+
text-decoration: underline orangered;
131+
}
132+
133+
a:active {
134+
background-color: black;
135+
font-style: italic;
136+
}

0 commit comments

Comments
 (0)