on air

CSS Anchor Pseudo-Classes.

back home » Web Tutorials » CSS » CSS Anchor Pseudo-Classes.


Scenario.

This time you'll learn how to style hyperlinks using the CSS Pseudo-Classes. And stay away from the deprecated HTML links styling. Anyhow, the CSS links styling will brings more freedom and strength in your works, and it's highly recommended by W3C.

CSS Anchor Pseudo-Class [For Hyperlink].

The pseudo class [a] for hyperlink MUST strictly be placed in the following steps in the CSS declaration, as indicated below for a proper, and effectiveness of the way links will be styled and work in your documents.

The reason for this is a simple logical understanding, look here. If a link is not created it can't be visited, get hovered, nor be activated, therefore.

  • The a:link MUST come first notifying, the this is a hyperlink. This should use a color different from the standard site's font color, or underlined, for it to stand out from the rest.
  • Followed by the a:visited. that say, this link has been visited. Usually uses a faded version of the color used for the a:link.
  • And as a hyperlink can only get hovered before getting activated, so must a:hover follow. with any color that differentiates itself from the others that says, click on me I'm a hyperlink.
  • And then a:active will come at last, also with a different color to remember. Saying, you've clicked on me, if you release the mouse I'll be executed, so decide now.

I hope this makes sense, if not don't get worried you just follow up as said, and your links will work perfectly.

See illustration below.

<html>
<head>
<style>
<!--
	a:link {color:red;} 
/*unvisited link -no action*/

	a:visited {color:blue;} 
/*visited link -clicked and released*/

	a:hover {color:gold} 
/*mouseover link -mouseover without click*/

	a:active {color:green;} 
/*activated link* -click and hold*/
-->
</style
</head>

<body>
<p>
Hello World, this is how pseudo-class work with 
<a href="https://ghanachild.com">hyperlinks</a>
</p>
</body>
</html>

FastLane Tip#1.

You may copy the script above, paste it into Notepad, save it as try.html, and preview it in your choice of a browser to see how it will work. Try changing the color values in the CSS to see how the hyperlink changes its colors along with. You may use HEX like #012abc.

Learn More.

Check out the CSS pseudo format classes Tutorial, and learn some more about using the pseudo format classes.

For in-depth CSS knowledge check out the CSS Tutorials page.

CSS Anchor Pseudo-Classes

Clicks4UrMind

Man will give you worldly powers, and make you feel on top of all, note this is temporally and could be redrawn at anytime sending you back to the ground floor of life. However, the Lord Almighty, the one and the only rightful ruler of the Universe, blesses everlastingly.

Brain

Knowledge is Power, but Power is not Knowledge. Wisdom is the truthful Power that identifies the Knowledge within the man. And only, I repeat 3x. Only the almighty God has the power to bless the man with his Wisdom forever.

To achieve the Lord's blessings, cease not praying daily, asking for his Wisdom, and you'll be blessed abundantly...

SPYERA PHONE

Spyera Phone

Spyera Phone version is software that you install on a smart phone to monitor everything happening on the phone. After installation, SPYERA secretly records events (sms, call history, phone book, location, emails, What's App messages, IM, Facebook Chat, Skype, See photos taken and many more...) that happen on the phone and delivers these information to a web account, where you can view these reports 24/7 from any Internet enabled computer or mobile phone. SPYERA also allows you to listen to the surroundings of the target mobile , listen to the phone conversation and to know the location of the device.


Please, Kindly Donate What You Can, Enabling Us Pay Hosting And Domain Costing, And Do More.

Please Donate