HTML Anchors Link Style Using CSS
In CSS, we can style links by changing their properties (color, background-color, text-decoration, etc.)
Link By default:
- links are underlined
- unvisited links are blue
- visited links are purple
- hovering a link makes the mouse a little hand icon
- focused links have an outline around them
- active links are red
With CSS, of course we can change those properties or style them.
Styling Links With CSS
Before we can start styling links we first need to understand the concept of link states.
Link States
Link states are different states that a link that can exist in which can be styled using pseudo-classes.
- Link (unvisited): pseudo-class is :link; the default state, it isn’t in any other state
- Visited: pseudo-class is :visited; a visited link (exists in browser’s history)
- Hover: pseudo-class is :hover; a link that is being hovered (mouse over)
- Focus: pseudo-class is :focus ; a link when it is being focused e.g. focused by pressing the Tab key
- Active: pseudo-class is :active ; a link when it is being activated or clicked on
Link’s Text Decoration
You may want to change or remove a link’s text-decoration which is an underline by default.
Create A Travel Website Using HTML & CSS
We can achieve it by using the text-decoration CSS property.
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}Change Link’s Background Color
You may want to add a link’s background color.
We can achieve it by using the background-color CSS property.
a:link {
background-color: lightgreen;
}
a:visited {
background-color: lightgreen;
}Adding Icons to Links
It’s a good idea to add icons to links. For example, if the link will open in a new tab.
Restaurant Website Using HTML and CSS
<!DOCTYPE html> <html> <head> <title> Try It Yourself </title> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> </head> <body> <p> Go to <a href="http://www.example.com">Example.com<i class="material-icons">launch</i></a>. </p> <p><b> Note! </b> This demo requires internet connection. </p> </body> </html>
Output Of Icon
Styling Links in CSS Advanced
Here is an example of an advanced way of styling links in CSS: adding borders and padding etc.
Note: In the CSS definition, the :hover pseudo-class should come after the :link and :visited pseudo-classes. And the :active pseudo-class must come after the :hover pseudo-class.
a {
outline: none;
text-decoration: none;
font-family: sans-serif;
}
a:link {
color: black;
}
a:visited {
background: lightgrey;
}
a:focus {
border: 1px solid red;
background: lightgrey;
}
a:hover {
border: 1px solid #f8f9f9;
background: #173459;
color: white;
}
a:active {
text-decoration: underline;
border: 1px solid lightgrey;
background: #d9534f;
color: white;
}Was that link not looking good? Yes, maybe!
So I challenge you to style it yourself and be creative.
Tic Tac Toe Game Using HTML,CSS and JavaScript
ADVERTISEMENT
You can try experimenting by changing the colors and backgrounds.
ADVERTISEMENT
Thanks For Reading!
ADVERTISEMENT
