Menu
Styling Text & Links
CSS Links
Style <a> tags for different states.
1Link States
Target normal, visited, hover, and active states.
Example Code
css
a { color: blue; text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: purple; }2Understand it in a real interface
Links should describe a destination, and paragraph links should remain recognizable without relying only on color. Hover, focus, active, and visited states describe different situations. Use a real href for navigation, and a button for a page action such as opening a settings panel.
3Try it yourself
Write two paragraph links with meaningful labels and underline them. Tab through the page to inspect focus, then open a link and return to inspect its visited styling. Check that an underline does not disappear in a way that makes the remaining link difficult to identify.
Finished reading?
Mark this topic as complete to track progress.