Yesterday we've learned how to write code for the body. Now's time to go on, namely, how do I setup link. I mean, we make a hyperlink. When the mouse is over or placed (not on-click) on a link / url, the text-link will be changed. It can be an underline style, change the font color / letter, change the background font, etc. Actually it is quite easy depending on the thoroughness and our will. We start now?
Other reference is available at http://www.joesoft7-developer.co.cc
Write code below!
<html>
<head>
<title>Setting Link</title>
<style type="css/text">
body {
background: #FFFFFF ;
}
</style>
</head>
<body>
</body>
</html>
Continue with this code below!
a). Code for text-link which has been clicked or visited link;
a, a:visited {
color: #cccccc; ------------------- when clicked, text-link changed into one color coded by #cccccc
text-decoration: none; ------------- when clicked, no changes with the text-link. The code is [none]
If you want to change it into a certain color or other, just leave the
[none] and change it into, say, [underline]. See this below!
text-decoration: underline;
}
b). Code for link when mouse is over the text-link;
a:hover {
color: #097ca1;
text-decoration: underline;
}
color: #097ca1;
text-decoration: underline;
}
c). Non-active link or link has not been clicked or stand by;
a {
color: #000000;
text-decoration: none;
}
When we set up the color or text decoration, we should consider the image below or the background. If the backround is in white color, there will be more alternatives to pick. And, if the background is in black, white will be better.
Besides, we should consider the appearance all settings, specially with an ads (if available), such as adsense. Adsense ads will be more effective when the set up or other setting styles is blended in to the ads.
The all codes will be like this below!
<html>
<head>
<title>Setting Link</title>
<style type="css/text">
body {
background: #FFFFFF ;
}
a, a:visited {
color: #cccccc;
text-decoration: none;
color: #cccccc;
text-decoration: none;
}
a:hover {
color: #097ca1;
text-decoration: underline;
}
color: #097ca1;
text-decoration: underline;
}
a {
color: #000000;
text-decoration: none;
}
color: #000000;
text-decoration: none;
}
</style>
</head>
<body>
</body>
</html>
Please feel free to download this page.
CSS code for Hyperlinks (Lesson 2 from personal-x-code.blogspot.com) -
Now's your turn to start to modify it. Good luck!
CSS code for Hyperlinks (Lesson 2 from personal-x-code.blogspot.com) -
Now's your turn to start to modify it. Good luck!
