Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

How to Style Hyperlinks with CSS

Without hyperlinks, the web would be very boring! Hyperlinks are what allow you to browse a website from page to page - just click a link! If you want the user to go directly to the page, just add a link. If you want the link to open the page in a new browser tab, add the following property and value to your hyperlinks: target="_blank".

<a href="https://www.google.com" target="_blank">

Hyperlink Pseudo Classes (Remember: LOVE HATE)

Hyperlinks (a href tags) have 4 different stages that you can style. The link tag (non-visited), the visited tag (user had been there already), the hover tag (give the user feedback to let them know they have hovered over a link, and the active tag (currently clicking). An easy way to remember to style all 4 of these is to think of "love/hate" L-linke; V-visited; H-hover; A-active. NOTE: The styles to the active link can be seen when you click the link but before you let up on the mouse.

HTML

styling html hyperlinks

CSS

css style hyperlinks

RESULTS

NOTES

Hover over the text in the results section and watch the links change the text color or background color - based on the styles applied to each section.

You should now be able to link pages together and style the hyperlinks using CSS. Take a few moments and practice styling hyperlinks.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved