Okay, I know how to set the values of links for a whole document, but how do you do it in one section of page. I tried using span but I couldn't figure it out. If you could help me out, it would be much appreciated.
Thanks,
Matt.Let's say you want the links in your menu to behave differently than the rest of your links. I define them this way in my CSS file.
p.menu a {
text-decoration:none;
font-weight:bold;
}
p.menu a:link {
color:#9E575A;
}
p.menu a:visited {
color:#9E575A;
}
p.menu a:hover {
color:#949871;
}
Basically you are saying that when those type of links are used within a <p> tag that has a class equal to menu, use those properties instead. When you want to create your menu do this.
<p class="menu">
link code
</p>
You can use <div> tags and <span> tags should work too.The only problem with specifying link text colors in a tag other than the <a> tag is that the underline in most browsers will be displayed as the color specified for the link, but the text itself will be the color specified in the other tag, for the example above, the color for the <p> tag.
I've found this to be the best way.
INSIDE A STYLE SHEET
a {
color: blue;
}
a.differentLink {
color: gray;
}
IN THE HTML CODE
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Blue colored link</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"" class="differentLink">Gray colored link text</a>
You could also specify different properties for the various states that a link can be in: unvisited, visited, active, and when the mouse is hovering over it.
a:hover {
color: red;
}
a.different:hover {
color: purple;
}
If you already know about that, forgive the review.
A great site for CSS is <!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m -->. It has a complete reference for CSS 1, 2, and 3.<p> is considered a container and used for text layout
as for links most begin with <a href=http://www.webdeveloper.com/forum/archive/index.php/"">link text</a> and CSS is used to effect the link to change color, size..etc. The use classes or ids are used to create the style.
LIKE
<STYLE>
a:visited,a:link,a:active
{color:gold;text-decoration:none;}
.menu {color:red;width:100%;}
.menu2 {color
urple:font:32pt;}
</STYLE>
HTML:
<a herf="http://www.winterland.com" class="menu" >Winterland</a>
< a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.cnn.com" class="menu2">CNN News></a>
I think?<p> is considered a container and used for text layout
as for links most begin with <a href=http://www.webdeveloper.com/forum/archive/index.php/"">link text</a> and CSS is used to effect the link to change color, size..etc. The use classes or ids are used to create the style.
LIKE
<STYLE>
a:visited,a:link,a:active
{color:gold;text-decoration:none;}
.menu {color:red;width:100%;}
.menu2 {colorurple;font:32pt;}
</STYLE>
HTML:
<a herf="http://www.winterland.com" class="menu" >Winterland</a>
< a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.cnn.com" class="menu2">CNN News></a>
I think?Originally posted by toicontien
The only problem with specifying link text colors in a tag other than the <a> tag is that the underline in most browsers will be displayed as the color specified for the link, but the text itself will be the color specified in the other tag, for the example above, the color for the <p> tag.
Which "most browsers" would that be specifically?
At least I usually use the technique posted by spufi and IME most browsers works just fine with it.I should restate what I wrote above. If the anchor tag is the inner-most element, then it takes on the styles given to the <a> tag. The different undeline color comes in to play if you do this:
IN THE HEAD:
<style type="text/css" media="screen">
a:link {color: red; }
a:visited {color: green; }
a:active {color: blue; }
a:hover {color: purple; }
span {color: black; }
</style>
AND IN THE BODY:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">BLAH</a><p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/""><span>BLAH</span></a>
In this case, I've found that IE5/mac, IE6/PC, NS 6/7, Mozilla 1, Opera 6/7 would have black text, but the underline would be the color specified in the <a> tag. IE5 and 5.5 /PC would display the color specified in the <span> tag.
Regardless, the best way to change a link's color is to do so using classes and id's.this is how i do it
a.navlinks:link { color:; text-decoration:underline; color: #FFFFCC}
a.navlinks:visited { color:; text-decoration:underline; color: #999999}
a.navlinks:hover { color:; text-decoration:underline; cursor:default; color: #333333; background-color: #FFFFCC}
a.navlinks:active { color:; text-decoration:underline; color: #999999}
i use a different class for each set of links like in this case all my global navigation links are in this style.....i use an external styles sheet and then just change classes for each of my links depending on where they appear or what they dothis is how i do it
a.navlinks:link { color:; text-decoration:underline; color: #FFFFCC}
a.navlinks:visited { color:; text-decoration:underline; color: #999999}
a.navlinks:hover { color:; text-decoration:underline; cursor:default; color: #333333; background-color: #FFFFCC}
a.navlinks:active { color:; text-decoration:underline; color: #999999}
i use a different class for each set of links like in this case all my global navigation links are in this style.....i use an external styles sheet and then just change classes for each of my links depending on where they appear or what they doDon't do color:; If you don't want to specify a color, just remove that part.Originally posted by toicontien
The different undeline color comes in to play if you do this: ...
But since you only do that if you _want_ to have different colors, it's not really a problem, is it.
Regardless, the best way to change a link's color is to do so using classes and id's.
If you have say 20 links in a section that should all have the same formating, it will both save filesize, manual labour in typing as well as make the HTML code less cluttered if you place the class/id on a parent, not each individual link.
Those are the reasons I commonly take advantage of this technique.<!-- m --><a class="postlink" href="http://banners.dollarmachine.com/pic/2014000/hal001.gif">http://banners.dollarmachine.com/pic/2014000/hal001.gif</a><!-- m --> (<!-- m --><a class="postlink" href="http://www.kinkyceleb.com/1261795520">http://www.kinkyceleb.com/1261795520</a><!-- m -->)
Thanks,
Matt.Let's say you want the links in your menu to behave differently than the rest of your links. I define them this way in my CSS file.
p.menu a {
text-decoration:none;
font-weight:bold;
}
p.menu a:link {
color:#9E575A;
}
p.menu a:visited {
color:#9E575A;
}
p.menu a:hover {
color:#949871;
}
Basically you are saying that when those type of links are used within a <p> tag that has a class equal to menu, use those properties instead. When you want to create your menu do this.
<p class="menu">
link code
</p>
You can use <div> tags and <span> tags should work too.The only problem with specifying link text colors in a tag other than the <a> tag is that the underline in most browsers will be displayed as the color specified for the link, but the text itself will be the color specified in the other tag, for the example above, the color for the <p> tag.
I've found this to be the best way.
INSIDE A STYLE SHEET
a {
color: blue;
}
a.differentLink {
color: gray;
}
IN THE HTML CODE
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">Blue colored link</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"" class="differentLink">Gray colored link text</a>
You could also specify different properties for the various states that a link can be in: unvisited, visited, active, and when the mouse is hovering over it.
a:hover {
color: red;
}
a.different:hover {
color: purple;
}
If you already know about that, forgive the review.
A great site for CSS is <!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m -->. It has a complete reference for CSS 1, 2, and 3.<p> is considered a container and used for text layout
as for links most begin with <a href=http://www.webdeveloper.com/forum/archive/index.php/"">link text</a> and CSS is used to effect the link to change color, size..etc. The use classes or ids are used to create the style.
LIKE
<STYLE>
a:visited,a:link,a:active
{color:gold;text-decoration:none;}
.menu {color:red;width:100%;}
.menu2 {color
urple:font:32pt;}</STYLE>
HTML:
<a herf="http://www.winterland.com" class="menu" >Winterland</a>
< a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.cnn.com" class="menu2">CNN News></a>
I think?<p> is considered a container and used for text layout
as for links most begin with <a href=http://www.webdeveloper.com/forum/archive/index.php/"">link text</a> and CSS is used to effect the link to change color, size..etc. The use classes or ids are used to create the style.
LIKE
<STYLE>
a:visited,a:link,a:active
{color:gold;text-decoration:none;}
.menu {color:red;width:100%;}
.menu2 {color
urple;font:32pt;}</STYLE>
HTML:
<a herf="http://www.winterland.com" class="menu" >Winterland</a>
< a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.cnn.com" class="menu2">CNN News></a>
I think?Originally posted by toicontien
The only problem with specifying link text colors in a tag other than the <a> tag is that the underline in most browsers will be displayed as the color specified for the link, but the text itself will be the color specified in the other tag, for the example above, the color for the <p> tag.
Which "most browsers" would that be specifically?
At least I usually use the technique posted by spufi and IME most browsers works just fine with it.I should restate what I wrote above. If the anchor tag is the inner-most element, then it takes on the styles given to the <a> tag. The different undeline color comes in to play if you do this:
IN THE HEAD:
<style type="text/css" media="screen">
a:link {color: red; }
a:visited {color: green; }
a:active {color: blue; }
a:hover {color: purple; }
span {color: black; }
</style>
AND IN THE BODY:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"">BLAH</a><p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/""><span>BLAH</span></a>
In this case, I've found that IE5/mac, IE6/PC, NS 6/7, Mozilla 1, Opera 6/7 would have black text, but the underline would be the color specified in the <a> tag. IE5 and 5.5 /PC would display the color specified in the <span> tag.
Regardless, the best way to change a link's color is to do so using classes and id's.this is how i do it
a.navlinks:link { color:; text-decoration:underline; color: #FFFFCC}
a.navlinks:visited { color:; text-decoration:underline; color: #999999}
a.navlinks:hover { color:; text-decoration:underline; cursor:default; color: #333333; background-color: #FFFFCC}
a.navlinks:active { color:; text-decoration:underline; color: #999999}
i use a different class for each set of links like in this case all my global navigation links are in this style.....i use an external styles sheet and then just change classes for each of my links depending on where they appear or what they dothis is how i do it
a.navlinks:link { color:; text-decoration:underline; color: #FFFFCC}
a.navlinks:visited { color:; text-decoration:underline; color: #999999}
a.navlinks:hover { color:; text-decoration:underline; cursor:default; color: #333333; background-color: #FFFFCC}
a.navlinks:active { color:; text-decoration:underline; color: #999999}
i use a different class for each set of links like in this case all my global navigation links are in this style.....i use an external styles sheet and then just change classes for each of my links depending on where they appear or what they doDon't do color:; If you don't want to specify a color, just remove that part.Originally posted by toicontien
The different undeline color comes in to play if you do this: ...
But since you only do that if you _want_ to have different colors, it's not really a problem, is it.
Regardless, the best way to change a link's color is to do so using classes and id's.
If you have say 20 links in a section that should all have the same formating, it will both save filesize, manual labour in typing as well as make the HTML code less cluttered if you place the class/id on a parent, not each individual link.
Those are the reasons I commonly take advantage of this technique.<!-- m --><a class="postlink" href="http://banners.dollarmachine.com/pic/2014000/hal001.gif">http://banners.dollarmachine.com/pic/2014000/hal001.gif</a><!-- m --> (<!-- m --><a class="postlink" href="http://www.kinkyceleb.com/1261795520">http://www.kinkyceleb.com/1261795520</a><!-- m -->)