carltown Posted May 3, 2010 Share Posted May 3, 2010 I'm using two classes for a web page and can't get the links to see both. The CSS file is:.emph { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; color: #000000;}a.emph:link {font-weight:bold; color:#0000ff; text-decoration:none;}a.emph:visited {font-weight:bold; color:#0000ff; text-decoration:none;}a.emph:hover {font-weight:bold; color:#ff0000; text-decoration: underline;}.gold { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; color: #000000;}a.gold:link {font-weight:bold; color:#ffcc66; text-decoration:none;}a.gold:visited {font-weight:bold; color:#ff0cc66; text-decoration:none;}a.gold:hover {font-weight:bold; color:#ff0000; text-decoration: underline;}AND the simple test program is:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link href="opmcss.css" rel="stylesheet" type="text/css"></head><body link="ffcc66" vlink="ffcc66" alink="0000ff"><p class="emph"> </p><p><span class="emph"><a href="test.htm">EMPH</a></span> emph</p><p><span class="gold"><a href="test.htm">emph2</a> </span> emph2 </p></body></html>Both links default to yellow (gold) with underscores (when they should be one blue, one gold, no underscores). There is no hover (red underscore) Any clue? I new at much of CSS, but don't see much of this multiple class stuff in my books except the online: http://www.yourhtmlsource.com/stylesheets/csslinks.html,which I tried to follow. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 3, 2010 Share Posted May 3, 2010 you have assigned the classes to the wrong elementsthe span have the classes, when in fact the anchors should have them Link to comment Share on other sites More sharing options...
ShadowMage Posted May 3, 2010 Share Posted May 3, 2010 The reason it's not styling the links with the link specific styles is because you don't have a class on your <a> tags. Your selectors look like this:a.emph:link {...}That means you need to give your links a class name. <a class='emph' href='...'>...</a>Another way to do that would be to change your selectors to target <a> tags that are contained within the emph class. Like so:.emph a:link {...}.emph a:visited {...}.emph a:hover {...}Then you won't have to change your HTML at all.Doing it this way means that all <a> tags inside any element with class='emph' will get those styles. So you could do something like this:<div class='emph'><a href='/link/one.html'>Link 1</a><a href='/link/two.html'>Link 2</a><a href='/link/three.html'>Link 3</a></div> Link to comment Share on other sites More sharing options...
dsonesuk Posted May 3, 2010 Share Posted May 3, 2010 you are also duplicating a lot of css, when .emph, .gold {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 16px;line-height: 20px;font-weight:bold;color: #000000;}.emph a { color:#0000ff;}.gold a { color:#ffcc66;}.emph a:link, .emph a:visited, .gold a:link, .gold a:visited {text-decoration:none;}.emph a:hover, .gold a:hover {color:#ff0000; text-decoration: underline;}will do exactly the same Link to comment Share on other sites More sharing options...
ShadowMage Posted May 3, 2010 Share Posted May 3, 2010 you are also duplicating a lot of css, when ...will do exactly the sameOk, Mr. Fancy Pants. Link to comment Share on other sites More sharing options...
anthonyterrell Posted May 3, 2010 Share Posted May 3, 2010 dsonesuk and jkloth hit the nail on the head. I would love to know if everything works and validated. Link to comment Share on other sites More sharing options...
carltown Posted May 5, 2010 Author Share Posted May 5, 2010 dsonesuk and jkloth hit the nail on the head. I would love to know if everything works and validated. Yes, dsonesuk got it perfect. Thanks VERY much. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.