i'm new to all this so i may not have worded this right.
my stylesheet.css file can be found at
<!-- m --><a class="postlink" href="http://www.santarosacyclery.com/stylesheet.css">http://www.santarosacyclery.com/stylesheet.css</a><!-- m -->
i have this for links:
A:link { font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 666666; text-decoration: none;
font-weight: bold;}
A:visited {font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 666666; text-decoration: none;
font-weight: bold; }
A:hover { font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 5B87C4; text-decoration: none;
font-weight: bold; }
A:active { font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 5B87C4; text-decoration: none;
font-weight: bold; }
but there's a section of my site where I would like to change the color of the links. so i created a new class that looks liks so:
.white {
font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
however when I try and use that class like so:
<div class="white">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about.aspx" class="white">Jeckyl 1000</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"members.aspx">Jeckyl 2000</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"pics.aspx">Gemini DH</a><br>
</div>
it doesn't work. is there something special i have to do to get my new class to override the specs for my links?
Thanks
DanChange .white to a.white, and it should work better. Also, on the colors, you need to prepend a # to the hex numbers...Welcome to the forums.
I'll explain why it isn't working. In your class, you've defined some CSS style rules — you then applied that class to a <div> element, and thus, all text inside of it will follow those rules. For example, if you had the string "foo" inside of it, it would appear to be affected by your rules, but as you've already noticed, it is not affecting your links. Why? Simply because you haven't told it to. As already stated, your current code will only affect text inside of that element, and since the links already have some CSS associated with them, they simply will not be affected. To get it working correctly, you must specify that you want the links to have the style you've specified. To do this, your CSS must look like this:.white aThis will now read as "all <a> elements inside of the element in which has its class attribute defined as "white" will follow these CSS rules". And that's all there is to it. I'd also like to note that you shouldn't be using a fixed unit (i.e., px), primarily because IE has trouble scaling these fonts. I would suggest defining the font-size at the very least 1em or 100% — if you even define a font-size at all. This way, the user's preferred font-size will be displayed.Also, compair my method with Fred's. Now that I look at your markup, I'm guessing you'll actually want Fred's, but take a look at the difference.Originally posted by pyro
Also, compair my method with Fred's. Now that I look at your markup, I'm guessing you'll actually want Fred's, but take a look at the difference. I know, it's confusing. On one hand, he has the CSS "white" class applied to that <div> element, and on the other he has it applied to one of the links. It isn't very obvious what he's trying to achieve.Yeah. When I first posted, I didn't even notice that he had the class applied to the div as well as the link. I just saw it in the link and posted that way... Well, at least now he has both...
For future reference, the CSS for your links could be done like this..
A { font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 666666; text-decoration: none;
font-weight: bold;}
A:visited { color: 666666; }
A:hover { color: 5B87C4; }
A:active { color: 5B87C4; }
Everything defined in "A" will also hold true for the states of "A." Just define the different colors in each of the different states and you're set.Except you need a # sign before the hex number for the colors...thanks a bunch guys for all the info.
.white a
worked but
a.white
didn't work.
Now that that's working I have another question. So that's completely overriding all of the link specs at the top of my stylesheet file. How can I now specify a hover spec for different links, or get it to use my existing hover spec?
Thanks again
DanOriginally posted by pyro
Except you need a # sign before the hex number for the colors...
Ah stupid late night posting.
Originally posted by dfinn
Now that that's working I have another question. So that's completely overriding all of the link specs at the top of my stylesheet file. How can I now specify a hover spec for different links, or get it to use my existing hover spec? No problem. You could do:.white a:hoverwierd. what i asked to have happen above is working in IE but not in Mozilla Firebird.Originally posted by dfinn
a.white
didn't work.Which means it didn't do what you wanted. It does, indeed work, though only on the first link (the one you gave the "white" class).Originally posted by fredmv
No problem. You could do:.white a:hover
exactly what I wanted. thanks.
my stylesheet.css file can be found at
<!-- m --><a class="postlink" href="http://www.santarosacyclery.com/stylesheet.css">http://www.santarosacyclery.com/stylesheet.css</a><!-- m -->
i have this for links:
A:link { font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 666666; text-decoration: none;
font-weight: bold;}
A:visited {font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 666666; text-decoration: none;
font-weight: bold; }
A:hover { font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 5B87C4; text-decoration: none;
font-weight: bold; }
A:active { font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 5B87C4; text-decoration: none;
font-weight: bold; }
but there's a section of my site where I would like to change the color of the links. so i created a new class that looks liks so:
.white {
font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
however when I try and use that class like so:
<div class="white">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about.aspx" class="white">Jeckyl 1000</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"members.aspx">Jeckyl 2000</a><br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"pics.aspx">Gemini DH</a><br>
</div>
it doesn't work. is there something special i have to do to get my new class to override the specs for my links?
Thanks
DanChange .white to a.white, and it should work better. Also, on the colors, you need to prepend a # to the hex numbers...Welcome to the forums.
I'll explain why it isn't working. In your class, you've defined some CSS style rules — you then applied that class to a <div> element, and thus, all text inside of it will follow those rules. For example, if you had the string "foo" inside of it, it would appear to be affected by your rules, but as you've already noticed, it is not affecting your links. Why? Simply because you haven't told it to. As already stated, your current code will only affect text inside of that element, and since the links already have some CSS associated with them, they simply will not be affected. To get it working correctly, you must specify that you want the links to have the style you've specified. To do this, your CSS must look like this:.white aThis will now read as "all <a> elements inside of the element in which has its class attribute defined as "white" will follow these CSS rules". And that's all there is to it. I'd also like to note that you shouldn't be using a fixed unit (i.e., px), primarily because IE has trouble scaling these fonts. I would suggest defining the font-size at the very least 1em or 100% — if you even define a font-size at all. This way, the user's preferred font-size will be displayed.Also, compair my method with Fred's. Now that I look at your markup, I'm guessing you'll actually want Fred's, but take a look at the difference.Originally posted by pyro
Also, compair my method with Fred's. Now that I look at your markup, I'm guessing you'll actually want Fred's, but take a look at the difference. I know, it's confusing. On one hand, he has the CSS "white" class applied to that <div> element, and on the other he has it applied to one of the links. It isn't very obvious what he's trying to achieve.Yeah. When I first posted, I didn't even notice that he had the class applied to the div as well as the link. I just saw it in the link and posted that way... Well, at least now he has both...
For future reference, the CSS for your links could be done like this..A { font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 666666; text-decoration: none;
font-weight: bold;}
A:visited { color: 666666; }
A:hover { color: 5B87C4; }
A:active { color: 5B87C4; }
Everything defined in "A" will also hold true for the states of "A." Just define the different colors in each of the different states and you're set.Except you need a # sign before the hex number for the colors...thanks a bunch guys for all the info.
.white a
worked but
a.white
didn't work.
Now that that's working I have another question. So that's completely overriding all of the link specs at the top of my stylesheet file. How can I now specify a hover spec for different links, or get it to use my existing hover spec?
Thanks again
DanOriginally posted by pyro
Except you need a # sign before the hex number for the colors...
Ah stupid late night posting.
Originally posted by dfinn Now that that's working I have another question. So that's completely overriding all of the link specs at the top of my stylesheet file. How can I now specify a hover spec for different links, or get it to use my existing hover spec? No problem. You could do:.white a:hoverwierd. what i asked to have happen above is working in IE but not in Mozilla Firebird.Originally posted by dfinn
a.white
didn't work.Which means it didn't do what you wanted. It does, indeed work, though only on the first link (the one you gave the "white" class).Originally posted by fredmv
No problem. You could do:.white a:hover
exactly what I wanted. thanks.