In this tutorial we will show you the solution of CSS link style examples, here different style means that we have to customize our link so that it looks styling, colorful and creative, etc.
Hence, in this article we will understand about how to apply styles of CSS to links.
Let us understand this briefly with the help of example given below.
Step By Step Guide On CSS Link Style Examples :-
Now, there are many ways with help of which we are able to apply different styles of links.
We can apply borders, background colors, hover styles and many other things based on creativity.
Now, its upon you that how much CSS knowledge do you have and what is your creativity level, which you can use to style links.
For a simple understanding, we are going to show you an example that how we can customize our links.
<!DOCTYPE html>
<html>
<head>
<title> CSS tutorials </title>
<style>
.linkOne:link {
color: red;
background-color: yellow;
}
.linkOne:visited {
color: yellow;
background-color: green;
}
.linkOne:hover {
color: black;
background-color: white;
}
.linkOne:active {
color: cyan;
background-color: pink;
}
.linkTwo:link, .linkTwo:visited {
background-color: black;
color: white;
border: 2px dotted red;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.linkTwo:hover, .linkTwo:active {
background-color: white;
color: black;
border: 2px solid black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<h1>
Talker’s code – CSS tutorials
</h1>
<h2>
CSS link style example
</h2>
<a class=”linkOne”>
This is first link
</a>
<br>
<a class=”linkTwo”>
This is second link
</a>
</body>
</html>
- As, here we see that we that in above example we show you an example in which html and CSS codes are used.
- Let us understand the above codes step by step.
- Here, first of all we create a basic structure of html, in which we use <!DOCTYPE html> which defines the type of document. And next one is our html tags. These tags are paired tag and all the data regarding html is written inside these tags.
- After we use our head tag which is again paired tag and contains title and meta information of the webpage. The data written inside head is not showed on the webpage.
- Now, next is our title tag which defines the title of webpage. The tag which has its closing tag is known as paired tag. So, this is again paried tag.
- Now, next is body which is main tag of html. The data which we written inside body is showed in webpage. Mostly all tags which are helpful to show data or information on screen is written under body tag
- As, above we created two links using anchor tag and we give different classes to them. Let us see how we can style them.
- To style them we use style tag and inside this we give CSS. To see how wee make the links creative, you have to open this code in browser. Now, we hope you easily understand because the above CSS used is basic CSS. To see the what CSS code is applied for what purpose, remove that code and view output on browser for better understanding.
Conclusion :-
At last, in conclusion here we can say that with the help of this article we are able to understand about how to remove underline from link using css.
I hope this tutorial on CSS link style examples helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
