Styling links using CSS:
Link styling, a very basic concept that can be achieved using CSS. How to style your links? A question many face. Well there are many tutorials on how to make fancy buttons, attractive buttons, and professional buttons. But what are the basics of the whole thing? I will be explaining the basics of link styling, I won’t go into the exact styling but a general explanation of the whole thing.
So starting with the very basics of links
In a plain html file, we have our link is link
|
<a href=”home_page.html” target=”_self” >Home Page </a>
|
Not so complicated and not so styled as well. It will look very simple and in most cases it will not suit the over all page layout if your page is totally custom. So there we have either use java scripting to make image rollovers as links, or very simply style them. It seems the word styling is very common in the article. But to be honest styling is a very basic tool to enhance the page look without needing to get into very complicated methods or very sophisticated coding. I am assuming here you know how to import or connect or embed a style sheet (i.e. a CSS file) into an HTML file. So the first thing is the basic selectors in styling links. There are 4 selectors in styling links which are:
|
a:link – the default look of a link at a page load
|
|
a:visited – this is activated for a link that has been viewed
|
|
a:hover – As soon a mouse is taken over a link, it generates the code on that link
|
|
a:active- the code is generated when that page is being viewed
|
These are often called linked pseudo classes. Well this is every thing we need in order to style our links. A little explanation of each selector is described with it. The first thing we can do is add a background, change the font family, vary the size of the font, change the color of the font, add a border, etc. there are many things we can play around with here.
There can be a few scenarios though those need to be looked into, let us start…
The first scenario is where we want all the links to have a single style applied. This is relatively very simple. No need of id’s, classes, etc. the code of the CSS file can simple be,
|
/**Styling of links**/
/***Note: we can continue adding as many things as we want. I am just giving a few examples here.
a:link{
background: black;
color: white;
text-decoration: none;
}
a:visited {
background: #333333;
color: white;
text-decoration: none;
}
a:hover {
background: #990000;
color: black;
text-decoration: underline;
}
a:active{
background: black;
color: #990000;
text-decoration: underline;
}
|
Well this was the first case. Not considering a somewhat complicated case; in which we have top panel of buttons, a side bar, and a body where the buttons come. So now we have the fun part. Getting indulged in inserting <div>, and introducing id’s, classes etc.
The first thing we need to see is will the same style be applied to various locations in a page. In case the answer is YES, we will implement classes in these situations. Other wise if its being implemented to an id that is it is going to unique and used only once. So how to implement an id
|
Top Links come here… <div id=top>
|
|
Side links come here
<div class=side>
|
Body comes here links of body
<div id=body>
|
|
|
|
Side links also come here
|
I did not mention the html code. In case you need it for the above table let me know. I would post it; Implementation in CSS. The ids, classes that is required are given in the table it self.
The code for CSS is as follows
|
/****For the ID=top****/
#top a:link {
/**Styling for Normal link here**/
}
#top a:visited {
/**Styling for visited link here**/
}
#top a:hover {
/**Styling for Hovering here**/
}
#top a:active{
/**Styling for Active link here**/
}
/****For the class=side****/
.side a:link {
/**Styling for Normal link here**/
}
.side a:visited {
/**Styling for visited link here**/
}
.side a:hover {
/**Styling for Hovering here**/
}
.side a:active{
/**Styling for Active link here**/
}
/****For the ID=body****/
#body a:link {
/**Styling for Normal link here**/
}
#body a:visited {
/**Styling for visited link here**/
}
#body a:hover {
/**Styling for Hovering here**/
}
#body a:active{
/**Styling for Active link here**/
}
|
That is the basic layout of the code to call the ids or classes for styling the links. The styling will be done in the { }. I have mentioned before what can be done to the links.
So I guess this is about it. Very simple styling help. I tried to explain the very basics of ids, classes and styling. If you have any questions leave them as comments I will try to help you out as soon as possible.
