CSS for Hyperlinks (the basics): targeting, hover effects, and simple animations

Create unique styles for your links using CSS. You'll learn common link styles, hover effects, and animated transitions. You'll also learn how to target the right links (and avoid applying styles to the wrong elements).

This tutorial was created on a WordPress site, but you can use these concepts on any website builder, as long as you're able to insert custom CSS code.

Adding CSS on WordPress:

**************************
Video Chapters
**************************
0:00 - Intro
0:39 - Let your theme set the base link colors
1:16 - CSS Selectors & Link targeting
2:30 - Finding the container selector
3:51 - CSS Classes vs. ID's
4:35 - Common Hyperlink styles
4:54 - Text-decoration
5:32 - Font-weight
5:50 - Link border-bottom
6:23 - Hover effects
7:22 - CSS Transitions (hover animation)
8:14 - :focus pseudo-class
9:29 - fixing edge cases (linked images)

[bencrossley]

Really helpful. Very clear instructions. I hope you get many more subscribers. You deserve it and they will be so glad they found your channel. I look forward to future tutorials and also browsing through your other uploads!! Thanks again.

[Klaus]

Matt, again: great Video! You are using a „Visual Editor (Ad)“ to program the CSS stuff. Where does this editor come from? Is this a plugin? Many thanks Klaus