Hello guys! evening and welcome to this section of my tutorial on Css, in my last tutorial post i talked about CSS Images. Now i want to discuss about the Css Links.
This section of my tutorial on Css teaches you how to set different properties of a hyper link using Css. You can set the following properties of a hyper link:
- The :link specifies unvisited hyperlinks.
- The :visited specifies visited hyperlinks.
- The :hover specifies an element that currently has the user's mouse pointer hovering over it.
- The :active specifies an element on which the user is currently clicking.
Usually, all these properties are kept in the header part of the HTML document.
Remember a:hover must come after a:link and a:visited in the Css definition in order to be effective. Also, a:active must come after a:hover in the Css definitions as follows:
<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
Now, we will see how to use these properties to give different effects to hyperlinks.
RECOMMENDED: Css Inclusion
Set the Color of Links
The following example shows how to set the hyperlink color. Possible values could be any color name in any valid format.
<html>
<head>
<style type="text/css">
a:link {color: #000000}
</style>
</head>
<body>
<a href="/html/index.html">Black Link Example</a>
</body>
</html>
<head>
<style type="text/css">
a:link {color: #000000}
</style>
</head>
<body>
<a href="/html/index.html">Black Link Example</a>
</body>
</html>
RECOMMENDED: Css Background
Set the Color of Visited Links
The following example shows how to set the color of a visited link. Possible values could be any color name in any valid format.
<html>
<head>
<style type="text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href="/html/index.html">Visited Link Example</a>
</body>
</html>
<head>
<style type="text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href="/html/index.html">Visited Link Example</a>
</body>
</html>
Change the Color of Links when Mouse is over
The following example shows how to change the color of links when we bring a mouse pointer over the link. Possible values could be any color name in any valid format.
<html>
<head>
<style type="text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href="/html/index.html">Bring Mouse Here</a>
</body>
</html>
<head>
<style type="text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href="/html/index.html">Bring Mouse Here</a>
</body>
</html>
Change the Color of Active Links
The following example shows how to set the color of an active link. Possible values could be any color name in any valid format.
<html>
<head>
<style type="text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href="/html/index.html">Active Link Example</a>
</body>
</html>
<head>
<style type="text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href="/html/index.html">Active Link Example</a>
</body>
</html>
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be studying about CSS Tables.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.