Probably the coolest thing about CSS is that it gives you the ability to add effects to your anchor tags, otherwise known as links. In HTML, the only way to add this effect would be to use JavaScript, but with the addition of CSS, JavaScript links can be forgotten.
The state's name is the "pseudo class" that defines how the HTML element should appear, depending on which state it is in. Below is an example of changing the "link", "visited", and "hover" state. Note the order that they are defined, as it is the proper ordering to make a functioning CSS link.
CSS Anchor/Link States
You may not know it, but a link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:- link - this is a link that has not been used, nor is a mouse pointer hovering over it
- visited - this is a link that has been used before, but has no mouse on it
- hover - this is a link currently has a mouse pointer hovering over it/on it
- active - this is a link that is in the process of being clicked
CSS Pseudo-Classes
The format for CSS Links is a little different from what you've seen in this tutorial so far. To modify these four states, you have to use the following CSS code formatting:CSS Code:
a:(STATE'S NAME) { attribute: value; }
CSS Code:
a:link { color: red; }
a:visited { color: red; }
a:hover { color: blue; }
HTML Code:
<a href="">This is a special CSS Link</a>!
Display:
The states must be defined in the correct order. Here is the order, starting with the one you must define first:- link
- visited
- hover
- active
Removing the Default Underline
Throughout Tizag.com you probably have noticed the different styles that we have for certain links. Our menu's do not have an underline, unless you are hovering, while the links in our main content do have underlines. To remove the underline from certain states of a link, use text-decoration: none.CSS Code:
a:link { color: red; text-decoration: none; }
a:visited { color: red; text-decoration: none; }
a:hover { color: blue; }
Display:
Be careful when removing the underline from your links. Sometimes, the removal of the underline may cause the link to be indistinguishable from normal text. There is a very small chance the common visitor will be able to notice that it is a link, if this is the case. So if you choose to remove the underline, be sure you do something else to the link to make it stand out.A Couple Examples
Below are two examples that use many forms of CSS to manipulate the states of a hyperlink.CSS Code:
a:link {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;
}
a:visited {
color: white;
background-color: black;
text-decoration: none;
border: 2px solid white;
}
a:hover {
color: black;
background-color: white;
text-decoration: none;
border: 2px solid black;
}
Display:
CSS Code:
a:link {
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}
a:visited {
color: blue;
background-color: red;
font-size: 26px;
border: 10px outset blue;
font-family: sans-serif;
text-transform: lowercase;
text-decoration: none;
}
a:hover{
color: blue;
background-color: red;
font-size: 27px;
border: 10px inset blue;
font-family: serif;
text-transform: uppercase;
text-decoration: line-through;
letter-spacing: 3px;
word-spacing: 6px;
font-weight: normal;
}
0 comments
একটি মন্তব্য পোস্ট করুন