Jump to content

Using multiple CSS classes


carltown
 Share

Recommended Posts

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

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

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

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...