Link Styles
Link classes are classifications for links that can be made in CSS. With link classes you can have certain links
be different from the other normal links. For example;
This Link is a normal link according
to my CSS.
However;
This Link
Has a class that makes it different. In this case, it has my navigation class on it. You can use classes on any link that you want. They come in handy for making
your website more appealing to the eye.
In order to make your class, open up your style sheet, or know where you are going to put the link class. For example, your style sheet could be looking like this;
body
{
background-color: pink;
font-family: tahoma;
font-size: 11px;
font-color: white;
}
Now we will make a class for your link. Start with the following code, adding on to what you already have.
(The bold text is what we are adding!)
body
{
background-color: pink;
font-family: tahoma;
font-size: 11px;
font-color: white;
}
.linkClass
{
}
Now you have the foundation for the class ready to go. What we put between the two brackets is what will define
your link class. From here it is simple CSS specifications to make the link look cool. Your creativity is what
will work out best here! :D
body
{
background-color: pink;
font-family: tahoma;
font-size: 11px;
font-color: white;
}
.linkClass
{
display:block;
color: #000000;
background-color: pink;
border-left: 8px solid #F34881;
padding-left:4px;
}
Great work! Now your link class is done. Now it is time to use the link class! Go find the links that you want
to use the link class on, and adjust the code link so.
Normal link;
<![CDATA[<a href="LinkStyles.aspx">Link</a>]]>
Link with class;
<![CDATA[<a href="LinkStyles.aspx" class="linkClass">Link</a>]]>
Now that link will have the class you made. When using ASP.NET, you would put the link class like so;
Making sure that the class is put at the end of all the other code.
Note! It is important that you do not put the "." (the period) in the class name in the actual code of the link.
class="linkClass"
NOT...
class=".linkClass"
The same principles for links also apply to link classes. You can go .linkClass:hover, etc.
.linkClass
{
display:block;
color: #000000;
background-color: pink;
border-left: 8px solid #F34881;
padding-left:4px;
}
.linkClass:hover
{
display:block;
color: #FFFFFF;
background-color: Black;
border-left: 8px solid #FFFFFF;
padding-left:2px;
}
Good luck with using link classes!
|