how do i make different CSS styles in one page??

[shamrock]

i want to make one froup of links in blue and other group in the same page in white

how can do it?!

[Ian Glass]

Simple with contextual selectors:

// put one set of links in a containing element
// (i.e. <div>, <td>, <th>, <p>, <span>, etc.)
.setOfLinks a {
  color: #fff;
  }

// for the other links on the page
a {
  color: #00f;
  }

~~Hope This Helps

[shamrock]

hmmmmm i don't get it...

im using frontpage98

and i put this code in the HEAD:




<style type="text/css">

A:link {
COLOR: blue
; TEXT-DECORATION: none
}
A:visited {
COLOR: blue
; TEXT-DECORATION: none
}
A:hover {
COLOR: lime
; FONT-WEIGHT: normal; TEXT-DECORATION: Bold
}
</style>


how can i make another one for another group?

[htmlite]

Try this...

<style type="text/css">
A:link {
COLOR: blue;
TEXT-DECORATION: none;
}
A:visited {
COLOR: blue;
TEXT-DECORATION: none;
}
A:hover {
COLOR: lime;
FONT-WEIGHT: bold;
}
A.foo:link {
COLOR: red;
TEXT-DECORATION: none;
}
A.foo:visited {
COLOR: red;
TEXT-DECORATION: none;
}
A.foo:hover {
COLOR: green;
FONT-WEIGHT: bold;
}
</style>

Then in the link tags you want different, add the class to them like so...

<a href="pagename.html" class="foo"> different color </a>

[Ian Glass]

Or

<style type="text/css">
  .blueLinks a:link {
    color: #00f;
  }
  // Rest of your style sheet...
</style>
<!-- ...miscellaneous HTML code... -->
<div class="blueLinks">
  <a href="page.html">This link is blue.</a>
  <a herf="page2.html">I am blue as well.</a>
</div>
<a href="page3.html">But, I am some other color</a>

That way you won't have to append a class to every time you need a certain color link. That works especially is you have a big cluster of links and you don't want to keep writing: <a class="...

[Dan Morgan]

Ian: I have tried your last method in a project Im currently working on but can get it to work.

I have defined my a: in an external stylesheet and added the extra set as you have posted. What I want is for a particular set of links to have a different hover colour that the normal ones.

Here is the CSS:

a  {
	font-size : 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight : normal;
	font-style : normal;
	color : #000066;
}

a:Visited  {
	font-size : 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight : normal;
	font-style : normal;
	color : #000066;
}

a:Active  {
	font-size : 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight : normal;
	font-style : normal;
	color : #000066;
}

a:Hover  {
	font-size : 10px;
	font-family:Verdana, Arial, Helvetica, "MS Sans Serif";
	font-weight : bold;
	font-style : normal;
	color : #000066;
}

.menulinks a:link {
	font-size : 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight : normal;
	font-style : normal;
	color : #000066;
}

.menulinks a:Visited {
	font-size : 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight : normal;
	font-style : normal;
	color : #000066;
}

.menulinks a:Active {
	font-size : 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight : normal;
	font-style : normal;
	color : #000066;
}

.menulinks a:Hover {
	font-size : 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight : normal;
	font-style : normal;
	color : ##0033CC;
}

and here is the HTML:

<div class="menulinks">
            <td align="left" valign="top" height="137" rowspan="3" width="137"><br>
              <b><a href="testlink.htm">GLOBUS</a><br>
              <br>
              Core<br>
              <br>
              Corporate/<br>
              Commercial<br>
              <br>
              Private Banking<br>
              <br>
              Retail Banking<br>
              <br>
              Risk Management<br>
              <br>
              Trade Finance<br>
              <br>
              Treasury/<br>
              Investment<br>
              <br>
              Information <br>
              Request<br>
              <br>
              JBase<br>
              <br>
              Home</b></td>
          </div>

Any ideas why it isnt working? The testlink I have added is still acting witht he normal a: behaviours. Cheers

[Ian Glass]

Gee, it should work, I think... That code is following the W3's rules on Contextual Selectors.

Anyway, is it not working in all browsers or just earlier browsers? If I'm not mistaken, IE5 & 6, NS6/Mozila, and Opera5 & 6 all support contextual selectors. I don't know if NS4 does, but given its track record, I think that's highly unlikely.

There are a few things that you can trim down in the code, so here's my suggestion on the code:

a  {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000066;
}


a:Hover  {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.menu { 
	width: 137px;
	font-weight: bold;
	text-align: left;
}

.menu a:hover {
	color: #0033CC;
}

<td valign="top" rowspan="3">
	<p><a href="testlink.htm">GLOBUS</a></p>
	<p>Core</p>
	<p>Corporate/<br>Commercial</p>
	<p>Private Banking</p>
	<p>Retail Banking</p>
	<p>Risk Management</p>
	<p>Trade Finance</p>
	<p>Treasury/<br>Investment</p>
	<p>Information</p>
	<p>Request</p>
	<p>Jbase</p>
	<p>Home</p>
</td>

Anyway, after a more in-depth analysis of your code, I spotted that you had used two pound signs (##) where you specified your hover color:

.menulinks a:Hover {
	font-size : 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight : normal;
	font-style : normal;
	color : ##0033CC;
}

That's probably what is causing you grief. :-)

~~Hope This Helps

[Dan Morgan]

D'oh! Thanks Ian

I will also take your comments on the optimisation of the code on board too.

(Home from work for the weekend now so cant do anything til monday! :-( Dont you just hate it when that happens! )

[Dan Morgan]

Ok, the hover now works, but for some reason the links are not taking on the 11px fontsize?

All normal links are 10px, but these links using the .menu class I want to be 11px.

But they appear as 10px when normal but enlarge to 11px when rolled over.

a  {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000066;
}


a:Hover  {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.menu a:link { 
		font-size: 11px;
		width: 137px;
		font-weight: bold;
		text-align: left;
}

.menu a:hover {
		font-size: 11px;
		color: #0033CC;
}

The class for the links is defined in a div as above in the previous post. I have been spending ages doing this, even defining each individual <a> with the class doesnt work.

Please help (again )

Glen

[Winged Spider]

Contextual Selectors never seem to work out in some browsers.

Have you tested in Netscape 6.2 or Mozilla?

It will probably work in those browsers but not In IE.

The same things happens for something like

p+p { style:style; }

Might want to check some CSS bug reports to see were and when your method won't work.

[Dan Morgan]

Tested it in Netscape 6.2 and still no joy! ulling my hair out over this one!

Help!

[Ian Glass]

I think that's because you've already visited the links. The visited pseudo-class doesn't seem to inherit from the link pseudo-class, unfortunately. Try:

a  {
  font-size: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #000066;
}


a:hover  {
  font-weight: bold;
}

.menu a {
  font-size: 11px;
  width: 137px;
  font-weight: bold;
  text-align: left;
}

.menu a:hover {
  color: #0033CC;
}

~~Hope This Helps (again ;-)

[Dan Morgan]

A million thankyous Ian, you are the CSS daddy!

[Ian Glass]

<humble>I'm just glad to help...</humble> :-D

Thanks!