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.
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
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:
a:(STATE'S NAME) { attribute: value; }
a:link { color: red; } a:visited { color: red; } a:hover { color: blue; }
Below are two examples that use many forms of CSS to manipulate the states of a hyperlink.
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; }
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; }