Styling Link in CSS
Styling Link
-
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
-
Special for links are that they can be styled differently depending on what state they are in.
For Example
a
{
color: red;
}
This will style all aspects of the link (hover, visited, and active).To style each part separately, we use pseudoclasses.
- Link Pseudoclasses
-
There are four basic types of link pseudo-classes we can define:
-
:link - this is the default style for the link .
-
:visited - after a link has been clicked.
-
:hover - as a mouse is paused over a link (pre-click).
-
:active - right as the link is being clicked
- Creating Pseudoclasses
-
To define a link pseudo-class, we use it with the a tag in our CSS Selector.
-
So, to change the visited color of all our links to grey, we write:
For Example
a:visited
{
color: grey;
}