PDA

View Full Version : CSS font colors....


africano
04-25-2007, 01:09 AM
Ok, Im using a free web template for my webpage. Its got CSS styles, Im new to CSS. When I hyperlink it applies a yellow color to my links. The thing is I want some of the links to be another color than yellow but I can seem to chenge this, any ideas?

africano
04-25-2007, 01:42 AM
UPDATE:: My problem is I dont know CSS... Ive figured out the template is set to make all links yellow and grey when mose hovers over. But for some links I dont want this. I want them to be black and another color when mouse hovers, what can I do please need help urgently!

Andromeda
04-25-2007, 01:44 AM
If you can post your css and html code I will try to help you.

africano
04-25-2007, 01:47 AM
Im not sure what I should be posting...

class="style70"><br />
</span><span class="style113"><br />
</span></span><span class="style97"><a href="http://www.brighton.ac.uk/opendays/campustours.php?PageId=23" target="_blank" class="style87">Campus Tour </a></span><span class="style18"><br />
<br />
Campus Tour in bold, is a link. The template makes all links yellow and grey when Hovered over. This is fine. But now I have some links where the yellow clashes and doesnt look good. So for these links I want to change the yellow to another color.

Andromeda
04-25-2007, 01:50 AM
Can you go to code view of your page and copy and paste the whole lot.

edbr
04-25-2007, 01:51 AM
a{
color: #000;
}
a:hover{
color: #FFF;

}would give you back then white on hover. But post your code as Andromeda says

africano
04-25-2007, 01:53 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Website Title Here</title>
<meta name="description" content="Add Your Website Description Here">
<meta name="keywords" content="Add Some KEYWORDS for Web Searches For Your Website Here">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background-color: #E1E1E1;
}
a {
font-family: Trebuchet MS;
color: #CCCCCC;
}
a:link {
text-decoration: none;
color: #FFCC00;
}
a:visited {
text-decoration: none;
color: #FFCC00;
}
a:hover {
text-decoration: none;
color: #CCCCCC;
}
a:active {
text-decoration: none;
}
.style11 {
font-family: "Microsoft Sans Serif";
color: #CCCCCC;
}
.style17 {font-size: 36px; font-weight: bold;}
.style18 {font-size: 10px}
.style19 {font-size: 20px}
.style20 {
font-size: 24px;
color: #000000;
}
.style21 {
font-size: 14px;
color: #666666;
}
.style22 {font-size: 18px; font-weight: bold;}
.style23 {
font-family: "Microsoft Sans Serif";
font-size: 12px;
}
.style24 {
color: #999999;
font-size: 12px;
}
.style26 {
font-size: 12px;
color: #666666;
}
.style27 {font-size: 36px}
.style29 {
color: #000000;
font-weight: bold;
font-size: 24px;
}
.style28 {font-size: 12px; font-family: "Microsoft Sans Serif"; color: #666666; }
.style42 { color: #0033CC;
font-size: 14px;
}
.style63 { color: #666666;
font-weight: bold;
}
.style69 {color: #000000}
.style70 {color: #FFFFFF; font-size: 12px; }
.style73 {
font-size: 16px;
color: #FFCC00;
font-weight: bold;
}
.style77 {color: #000000; font-size: 10px; }
.style87 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #FFFFFF;
}
.style95 {
font-size: 15px;
font-weight: bold;
}
.style97 {color: #000000; font-size: 15px; }
.style100 {
color: #000000;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
.style101 {color: #333333}
.style103 {color: #000000; font-family: Arial, Helvetica, sans-serif; }
.style104 {color: #FFFFFF; font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
.style107 {font-size: 13px}
.style109 {color: #FFFFFF; font-size: 15px; font-family: Arial, Helvetica, sans-serif; }
.style112 {font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #FFFFFF; }
.style113 {font-size: 15px}
.style115 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; }
-->
</style>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/map2moulscombe.jpg')">
<table width="850" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td height="206" valign="top" bgcolor="#333333"><table width="850" height="150" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" background="images/topBKGND.jpg" bgcolor="#999999" class="style11"><div align="center"><span class="style17"><img src="images/spacer.gif" width="5" height="1" /><br />
<span class="style18">1</span><br />
<img src="images/spacer.gif" width="15" height="1" /><span class="style19"><img src="images/spacer.gif" width="15" height="1" /><span class="style20">Brighton School of CMIS </span><img src="images/spacer.gif" width="375" height="1" /></span></span><span class="style27"><span class="style19"><span class="style21">your company motto</span></span></span><span class="style17"><span class="style19"> <br />
<br />
</span></span></div></td>
</tr>
</table>
<table width="765" height="34" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="93" align="center" class="style11"><div align="center"><span class="style22"><a href="index.html"></a></span></div></td>
<td width="133" align="center" class="style11"><div align="center"><a href="index.html"><strong>Home</strong></a></div></td>
<td width="110" align="center" class="style11"><div align="center"><strong><a href="http://www.brighton.ac.uk/cmis/" target="_blank">Cmis</a></strong> </div></td>
<td width="163" align="center" class="style11"><div align="center"><strong><a href="index.html">FAQ</a></strong> </div></td>
<td width="164" align="center" class="style11"><div align="center"><a href="http://www.brighton.ac.uk/cmis/aboutus/enquiries.php?PageId=50" target="_blank"><strong>Contact Us </strong></a></div></td>
<td width="88" align="center" class="style11"><div align="center"><a href="index.html"></a></div></td>
</tr>
</table>
<table width="850" height="176" border="1" cellpadding="0" cellspacing="0" bordercolor="#E0DFE3">
<tr>
<td width="180" height="174" valign="top" background="images/TEXTside.jpg" class="style11"><table width="180" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFCC00" background="images/computers.jpg" bgcolor="#FFFFFF">
<tr>
<td height="143" background="images/TEXTside.jpg">&nbsp;</td>
</tr>
</table>
<table width="175" height="407" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" background="images/TEXTside.jpg"><img src="images/watts.jpg" width="180" height="145" /><br />
<br />
<table width="180" height="106" border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td width="4" bordercolor="#FFFFFF" background="images/TEXTside.jpg" bgcolor="#FFCC00"><div align="left" class="style18">
<p><br />
</p>
</div></td>
<td width="175" bordercolor="#FFFFFF" background="images/TEXTside.jpg" bgcolor="#FFFFFF"><p align="justify"><span class="style77"><strong><span class="style109">Want to visit us? </span><br />
</strong><br />
<span class="style115">If you wish to see more you can book a campus tour, which are organized by the university and consist of student led tours of our campuses and facilities. Click the link below for more information. </span><span class="style70"><br />
</span><span class="style113"><br />
</span></span><span class="style97"><a href="http://www.brighton.ac.uk/opendays/campustours.php?PageId=23" target="_blank" class="style87">Campus Tour </a></span><span class="style18"><br />
<br />
<span class="style115">Are you an International Student planning on coming to study at our school? have a look and see what other international students have to say.Click the link below.</span></span></p>
<p><a href="http://www.brighton.ac.uk/cmis/international/index.php?PageId=400" target="_blank" class="style87">International Students</a><span class="style18"><span class="style69"> <br />
<br />
<span class="style42"><span class="style77">Vestibulum iaculis lacinia est. Proin dictum elementum velit. Fusce euismod consequat.<br />
<br />
</span></span></span></span></p></td>
</tr>
</table>
<table width="175" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><br />
<br /></td>
</tr>
</table>
<br /></td>

africano
04-25-2007, 01:54 AM
</tr>
</table></td>
<td width="550" valign="top" background="images/TEXTback.jpg" class="style11"><table width="550" cellspacing="0" cellpadding="0">
<tr>
<td align="center" background="images/silverBKGND.gif"><span class="style29">Welcome to Our Website</span> </td>
</tr>
</table>
<blockquote>
<table width="447" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="7" bordercolor="#FFFFFF">&nbsp;</td>
<td width="438" bordercolor="#FFFFFF" class="style28"><div align="justify"><span class="style95"><span class="style101">Panoramic Tour. </span></span><br />
<span class="style107"><br />
<span class="style103">Welcome to the School of CMIS at the University of Brighton. We have created this webpage containing panoramas of some of the areas of our faculty. Panoramas provide a new and interactive way to view content over the internet. Enjoy. Clicking on the 3D map below will bring up a 2D map of the campus, double clicking will return the original image. </span></span></div></td>
</tr>
</table>
</blockquote>
<table width="408" height="333" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td width="104" height="184" valign="top" background="images/TEXTback.jpg"><table width="105" height="181" border="0">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><a href="suite1.html"><img src="images/button_tests_v2.gif" width="105" height="53" border="0" /></a></td>
</tr>
<tr>
<td><a href="suite2.html"><img src="images/button_tests_v3.gif" width="105" height="53" border="0" /></a></td>
</tr>
<tr>
<td><a href="suite3.html"><img src="images/button_tests_v4.gif" width="105" height="53" border="0" /></a></td>
</tr>
<tr>
<td><span class="style69"><a href="wattstv.html"></a></span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
<td width="408" height="333" valign="top"><img src="images/courtyard.jpg" name="OUTSIDE" width="408" height="333" id="OUTSIDE" ondblclick="MM_swapImgRestore()" onmouseup="MM_swapImage('OUTSIDE','','images/map2moulscombe.jpg',1)" /><br /></td>
</tr>
</table>
<br />
<br />
<table width="348" height="215" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td width="344" height="172" valign="top" background="images/TEXTback.jpg"><blockquote>
<p><span class="style42"><span class="style63"><br />

<APPLET archive="PurePlayerPro.jar" code="PurePlayerPro" width="440" height="280">
<param name="gui" value="gui.xml">
<param name="panorama" value="garden_BIG_copy_xml.ivp">
<param name="quality" value="800">
<param name="optimizememory" value="true">
<param name="antialiasing" value="everytime">
</APPLET>

</span></span></p>
</blockquote></td>
</tr>
</table>
<blockquote>
<p align="justify"><span class="style42"><span class="style70"><span class="style100">The courtyard situated between Cockroft and Watts, two of the three main buildings that make up the Moulscombe Campus. Nearby we can see the back entrance to the Cockroft site, the green area outiside, the gym area and further away is the Watts building and car park. </span></span></span><br />
<br />
</p>
</blockquote></td>
<td width="170" valign="top" background="images/TEXTside.jpg" class="style11"><table width="170" height="150" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><div align="left" class="style104">
<div align="justify" class="style107">
<div align="justify">To view our panoramas you must have Java installed </div>
</div>
</div></td>
</tr>
<tr>
<td align="center"><div align="left" class="style104">
<div align="justify" class="style107">
<div align="justify">Please follow the link below if you do not have Java </div>
</div>
</div></td>
</tr>
<tr>
<td width="125" align="center">&nbsp;</td>
</tr>
</table>
<table width="175" height="32" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td width="171" align="center" bgcolor="#000000"><div align="center"><span class="style73"><a href="http://www.java.com/en/download/manual.jsp" target="_blank">JAVA</a></span></div></td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="175" border="0" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000" bgcolor="">
<tr>
<td><div align="justify"><span class="style112">You can use the mouse to move around the image and zoom in and out. Fullscreen panoramas are also available using the toolbar which is accessed placing the pointer over the question mark. </span></div></td>
</tr>
</table> <p>&nbsp;</p></td>
</tr>
</table>
<div align="center" class="style11">
<table width="850" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center"><span class="style23"><a href="index.html">Home</a><img src="images/spacer.gif" width="15" height="1" /> <a href="index.html"></a> <img src="images/spacer.gif" width="15" height="1" /><a href="http://www.brighton.ac.uk/cmis/" target="_blank">Cmis</a> <img src="images/spacer.gif" width="15" height="1" /><a href="index.html"></a> <img src="images/spacer.gif" width="15" height="1" /><a href="index.html">FAQ</a> <img src="images/spacer.gif" width="15" height="1" /><a href="index.html"></a><img src="images/spacer.gif" width="15" height="1" /> <a href="http://www.brighton.ac.uk/cmis/aboutus/enquiries.php?PageId=50" target="_blank">Contact Us</a></span></div></td>
</tr>
</table>
</div>
<table width="850" height="45" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="19" background="images/footer.jpg" bgcolor="#333333" class="style11"><img src="images/spacer.gif" width="75" height="1" /><span class="style24"><span class="style18">&copy;copyright 2006 Jose ODonovan Soler </span> <img src="images/spacer.gif" width="420" height="1" /></span><span class="style26"><a href="http://www.chargerel.com">design by chargerel </a></span></td>
</tr>
</table></td>
</tr>
</table>

<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;"></div>
</body>
</html>

Andromeda
04-25-2007, 02:06 AM
Near the top of your page in code view you have the following code:

a {
font-family: Trebuchet MS;
color: #CCCCCC;
}

This code is saying that all links will be grey unless you state otherwise.

To change certain links to a different colour then you need to....

um ed? can you you complete this?? :wink:.... i know you're there!!

africano
04-25-2007, 02:09 AM
Thanks Andromeda, this is for my final year proj appreciate the time and hopefully Ed will help me out too!

Andromeda
04-25-2007, 02:11 AM
I'm just grasping css and trying to answer questions helps me to consolidate what I've learnt only sometimes I get kind of confused (like now) and I don't want to give you wrong advice!!!

Andromeda
04-25-2007, 02:24 AM
I think you need to make a seperate class for the links you want in a different colour.

Your code looks like this at the moment:

a {
font-family: Trebuchet MS;
color: #CCCCCC;
}


Now set up a class and name it, for example, let's call the class "ufo"

The css will look like this:

a.ufo {
font-family: Trebuchet MS;
color: #FFFFFF;
}


The only two differences between the two codes is that the second one has the class name stated and I've changed the colour from CCC to FFF. Note: All links will be CCC in colour unless you add a class (in this case ufo) in which case they will then be FFF.

In the correct place in your html (where you want the link to go) type code similar to this:
<a href="whatever.html" class="ufo">links to whatever</a>

Once you get the hang of this you can then work on the hover etc.

Hope this helps????

edbr
04-25-2007, 02:56 AM
in your code you have
a:visited {
text-decoration: none;
color: #FFCC00;
}this determines what pages that have been visited will be.ie colour and no decoration means no underline


a:hover {
text-decoration: none;
color: #CCCCCC;
}this is the same and will determine colour when the mouse is over the link.As Andromeda says #CCCCCC is grey , replace this with the colour of your choice and if you want an underline delete the line text-decoration: none;

africano
04-25-2007, 04:04 AM
OK, thanks ofr the help Im going to try it now. What I dont know is when I go to New CSS rule it has some options: Selector type and Selector.
Which one do I have to select to do what I need to do?

africano
04-25-2007, 04:21 AM
UPDATE: I tried adding a new css rule. But there is no a. in the code simply a style....how do u add the a. and what is it.
Ive added the style but it doesnt override the yellow links...please help?

africano
04-25-2007, 05:06 AM
Please I need some Help....I can change the color of all the links on the page but cant do it for only the ones I want...

africano
04-25-2007, 05:14 AM
UPDATE:: I tried making a new class which makes the text black but still it is yellow...here is the code PLEASE HELP ME.


<a href="http://www.brighton.ac.uk/opendays/campustours.php?PageId=23" target="_blank" class="newcolor">Campus Tour </a></span><span class="style18"><br />
<br />

edbr
04-25-2007, 09:05 AM
sorry I think i misunderstood what you wanted. I was out of the office and am going again so I am rushed. This is an example of a way to have different effecfts .If you have this in your style sheet

a.two:link {color: #666666}
a.two:visited {color: #666666}
a.two:hover {font-size: 150%}

and then reference by

<a class = "two" href="your link.html">Your link text</a>
Does that help?

africano
04-25-2007, 09:09 PM
Do I have to make a nw css rule to get that style, the code you have written down?

edbr
04-26-2007, 01:57 AM
yes. you have many styles already in you Head section. add this and chage properties to suit . do it by adding to the code directly.
It will be better to have your styles in a seperate style sheet but lets get to that later. try this first.

sruti
04-26-2007, 07:06 AM
Hi africano

Both andromeda and edbr suggested you correctly.
Well since you are new to this dreamweaver and html, let me explain you in simple terms.

In dreamweaver you will be having default colors for links. so if you want to change those colors you have to write this code in Head tag by defining a style


<head>
<style type="text/css">
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: none;
}
a:hover {
color: #FF0000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}


Well this code is replaced by the default link code.
When you link some text to a differnt page then the linked text will take this property of css
ie when you look at the text the color is black - color: #000000;
when your cursor is over the text then the color is red - color: #FF0000;
Similar way you can define different colors for different linked text by defining a class

a.ufo {
font-family: Trebuchet MS;
color: #0033FF;
}
a:hover.ufo {
color: #CC00FF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}


where ufo is the class name
Try to call the class to the links where you prefer the color change for the links.
<a href="#" class="ufo">About us</a>

There is an other way of writing the same

a.ufo:link {
font-family: Trebuchet MS;
color: #0033FF;
}
a.ufo:hover {
color: #CC00FF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
Both means the same.
I wish you got that.
Any more doubts??
Get back.

domedia
04-26-2007, 02:29 PM
OT: Some nice first posts sruti, welcome to the club!

africano
05-01-2007, 06:37 PM
Thanks Im trying to figure it out now, Iv copied your code and I can get the link so that when the mouse moves over the link it turns black. But its still yellow, its getting the yellow color from the other links, dont know whats wrong....:( Need to figure this out as soon as possible, handing in tomorow!

this is the code Ive put in:
}
a.ufo {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
a:hover.ufo {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

and this is how I call it to the link:
<div align="center"><span class="style116"><a href="wattstv.html" class="ufo">TVStudio</a></span></div></td>

I think the problem is the style116 but I havent got a clue.....

africano
05-01-2007, 06:45 PM
Hi, just tried edbrs way and it worked!thanks a lot guys, Ill come back if i got any more issues!

africano
05-01-2007, 09:01 PM
Good nes didnt last long..... Now the link stays the same color and simply is small and when mouse hovers over it gets bigger size. This isnt a bad effect but I want the link to be lets say White and when mouse over it turns black.
This is code I have:
}
a.two:link {color: #FFFFF0}
a.two:visited {color: #000000}
a.two:hover {font-size: 120%}

Andromeda
05-01-2007, 09:42 PM
Try this:

a.two:link {color: #FFFFF0;} - the link will be white
a.two:visited {color: #000000;} - If the page that this link points to has already been visited then the link will be in black. Change it to #FFFFFF if you want it to be white
a.two:hover {color: #000000; font-size: 120%; } - When you hover the mouse over the link it will turn to black.