Learn VBA & Macros in 1 Week!

CSS - What's The Trick On Using A:link Colors In External Css?

Full Excel VBA Course - Beginner to Expert

What's The Trick On Using A:link Colors In External Css?	View Content

I'm just starting to experiment with external css files and I'm stuck on how to deal with setting color for the links.

When I put this in the html page itself it works fine:

<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>

But when I instead move it to the body section of my external css file and link to that css from my html file, it doesn't do anything (link colors just go back to the default). I know I'm generally setting up the external css file correctly since the other things I set in that external file get picked up correctly (font family, font size, background image, etc.).

Any magic to using link colors in an external sheet??

In case it helps, here is my css file:

Code:

body {
  background-color: #000033;
  color: white;
  background-image:url(balbkgnd.gif);
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
 }

td {
  font-size: 12.0pt;
  font-family: Trebuchet MS;
  a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
}

th {
  font-size: 12.0pt;
  font-family: Trebuchet MS;
  a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
}

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Different Link Colors With Css

Need Help With Link Colors

2 Link Colors On A Page

Multiple Link Colors

How To Set Link Colors For A Cell?

Override Link Colors From Css

Active And Hover Link Colors?

Link/scrollbar Colors Not Working In Firefox

Link Colors In Firefox & Opera Compared To Ie

Problem With Link Formatting In External Sheet

Css (or Something Else) Trick I'm Looking For ...

Tricky Image Trick.

Different Colors Between Ff And Ie

Css Colors Not Working

No Colors In Firefox

Alternating Row (tr) Colors

My Colors Won't Show Up??! Please Help...

Colors And Spacing In Ie?

Css Links/different Colors

Learn VBA & Macros for Excel in 1 Week!

Different Link Colors With Css

Similar Tutorials

I'd like to be able to make some links on my page one color and others a different color so they show up appropriately on different backgrounds. how would i go about doing this?

thanks

Link Colors

Similar Tutorials

Hi,

Using CSS how can I set an individual bit of text to have a different link color then the rest of the links on my website?

Thanks

Need Help With Link Colors

Similar Tutorials

Hello all

I need help please :-)

I have a website I am making that will have various boxes and each box has to have a different link color and hover over color. My issue is that teh css does not work in terms of making all the links display the correct color as outlined in the css file. here is my css file maybe someone can tell me what is wrong (I will comment in the file also whats not working

Code:

<style type="text/css">

body {
 background-image: url(./images/pgbg.gif);
    color: #000000;
/*the below link attributes does not work */
   visited: color:#000000; text-decoration: none;
   link: color:#000000; text-decoration: none;
   focus: color:#000000; text-decoration: none;
   active: color:#000000; text-decoration: none;
   hover: color: #CC0000;
}

 .header{
background-image: url(./images/header.png);
background-color:#E6E6E6;
position:absolute;
width: 900px;
height: 100px;
left: 50px;
top: 5px;
}

.navbox1{
/*General Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 115px;
padding-left: 5px;
/*the below link attributes does not work */
 visited: color:#E6E6E6; text-decoration: none;
 link: color:#E6E6E6; text-decoration: none;
 focus: color:#E6E6E6; text-decoration: none;
 active: color:#E6E6E6; text-decoration: none;
 hover: color: #CC0000;
}

.navbox2{
/*Users Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 310px;
padding-left: 5px;
/*the below link attributes does not work */
 visited: color:#E6E6E6; text-decoration: none;
 link: color:#E6E6E6; text-decoration: none;
 focus: color:#E6E6E6; text-decoration: none;
 active: color:#E6E6E6; text-decoration: none;
 hover: color: #CC0000;
}

.loginbox{
/*Login Box*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 400px;
padding-left: 5px;
}

.content{
background-color:#E6E6E6;
position:absolute;
width: 700px;
height: 455px;
left: 250px;
top: 115px;
padding-left: 10px
}

.footer{
position:absolute;
width: 700px;
left: 100px;
top: 585px;
color: #D6E7D3;
}

</style>

2 Link Colors On A Page

Similar Tutorials

I'm making a page and I've got an a:link specification. I want a separate specification for a part of the page under a .header tag. The background on that part of the page doesn't match the a:link color I have specified for the rest of the page. So I want one specifically for the .header tag.

Doesn't seem to be working though. How do you think I should throw it in there?

Multiple Link Colors

Similar Tutorials

I've set-up a few link colrs in a style sheet - I see it working in mac IE, and Safari - but not IE in windows.

Most of the formatting is being ignored. I'm going to try setting all attributes (link, visited, hover...) for each set but that seems like a reach.

any ideas?

the link:

http://www.eightbyten.com/rc_store/shopcart_test.html

the style sheet directly:

http://www.eightbyten.com/rc_store/link.css

Thanks!

How To Set Link Colors For A Cell?

Similar Tutorials

Greetings all.

I am building a site which displays data in tables, with different background colors and different text colors. I am using CSS for everything, and it's working out great. Very happy with it so far.

What I want to do, and can't seem to figure out, is link / visited colors. In each line of data, some of the columns are links. I want to set the link text color to the same as the non-link text color.

I can override the text color easily enough. If I want a row to be white on red, I do that by saying: <tr style="background-color: #f00; color: #fff" >. I cannot figure out how to change a link color. The cells in the row that are links, I want to make them white on red also. Not just the default link color for the page.

Any help would, of course, be greatly appreciated.

Thanks,
Tom

Override Link Colors From Css

Similar Tutorials

I have a CSS that manages my site, but I've got a list of links that are dynamicly created with php/mysql. I have two lists that I would like to use non-CSS colors for their links.

Is there a way to override the CSS to force certain colors on the links? I've tried using the normal <p> or style settings, but the main links portion of the CSS always takes precedence and I can't seem to make it work for me.

A little background for you...the lists are as follows:
1 - a list of currently open jobs in the company
2 - a list of all jobs in the company

Both lists are also links to the job descriptions. List 1 is created based on whether the database has the job flagged as open, so its never static. List 2 is not static either because it lists the jobs in the database.

Active And Hover Link Colors?

Similar Tutorials

This is the new site I'm working on:
http://animalemergencybloomington.com/Index2.html

Link and Visited Link colors work, but I can't get Active or Hover color to work. (Doesn't work in any of the browsers I've tested it in.)

Right now I have this in the <head>

css Code:
Original - css Code <style type="text/css"> body { color: #000000; font-size: 12pt; font-family: Verdana; margin: 0px 0px; } A:link { text-decoration: none } A:visited { text-decoration: none } </style>

  

 <style type="text/css">


 body {


 color: #000000;


 font-size: 12pt;


 font-family: Verdana;


 margin: 0px 0px;


 }


 A:link { text-decoration: none }


 A:visited { text-decoration: none }


 </style>

and this for the <body>:

<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" alink="#0000FF" vlink="#1E90FF">

adding a:active and a:hover colors to the style gives a "parse error" for those lines when I try to validate and doesn't work anyway as far as getting a color change on hover.

I've been trying different combinations in the body and style all afternoon but get error warnings on everything I've tried except the above combo.

I'm just trying for links that are never underlined (hate how cluttered that makes things look) but turn red on hoover.

Help?
Thanks,
Ez

Link/scrollbar Colors Not Working In Firefox

Similar Tutorials

This code works in IE but not in FF. Does Firefox not support these?

<style type="text/css">

</style>

Link Colors In Firefox & Opera Compared To Ie

Similar Tutorials

I've searched the forum but can't find why my test with the following code works properly in IE (white link goinf yellowish on mouse over but not in FF or Op. It would be useful to correct this before going any further:

Many thanks

Robert
______________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="description"
content="test"
content="test">
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8895-1" />
<link rel="stylesheet" href="testcss.css" TYPE="text/css">

</head>

<body topmargin="0">

<div align="center">
<table border="1" cellspacing="1" width="760" bordercolor="#243348" height="50">
<span class="menu">
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item1.htm">item1</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item2.htm">item2</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item3.htm">item3</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item4.htm">item4</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item5.htm">item5</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item6.htm">item6</a></td>
<td width="40" align="center" bgcolor="#243348" height="50"><a href="item7.htm">item7</font></a></td>
<td width="41" align="center" bgcolor="#243348" height="50">
<p align="center"><a href="item8.htm">item8</font></a></td>
</span></table>
</div>
</body>

______________________________

.menu a {text-decoration:none; font-family: arial; font-size: 10pt
}

.menu a:link {color:#FFFFFF;
}
.menu a:visited {.color:#FFE2A8;
}
.menu a:hover {color:#FFE2A8;
}
.menu a:active {.color:#FFE2A8;

Problem With Link Formatting In External Sheet

Similar Tutorials

Hi...
I have a slightly confusing problem. I have an external sheet which all works fine except the colour of links before they are visited, active, etc. (It worked fine but one day stopped without any intervention on my part that I know about!)

The active link, visited link and hover link colours work as required and as specified in the external sheet, but it is the original link that does not, defaulting to the, erm, default colour.

My external sheet is as follows:

body {background-image: url("images/logo.jpg")}

type="text/css";

a:link {color: #c0c0c0;}
a:visited {color: #FF80FF;}
a:hover {color: #FF00FF;}
a:active {color: #FF80C0;}

h1.c1
{
text-align: center;
font-size: 46pt;
color: #bb8ec8
}

h1.c2
{
margin-left:130px;
font-size: 26pt;
color: #bb8ec8
}

h4
{
text-align: center;
color: #b15fb8
}

Any idea why is isn't working?

Cheers

Css (or Something Else) Trick I'm Looking For ...

Similar Tutorials

i'm wonderring if there's a way to add elipses ('...') to a long div that isn't suposed to wrap, contained by a table with a relative width. in other words, if somone resizes the browser window so that the div can show all of it's text, then fine, but if it's resized in such a way to clip any of the text, then the elipses are added.

not sure if this can be done, but i'm wonderring if anyone has seen it or done it. thanks for any feedback.

zick

Tricky Image Trick.

Similar Tutorials

this is really for a counter strike source server MOTD (which lets you use HTML/CSS)

First of all for the MOTD i want to use a graphic on it, there are 2 versions of it. One that fits nicely on a 800x600 screen, and one that doesnt (meant for 1024x768+)

unfourtantely the bigger one looks alot better. but I do not want it to go off the screen for gamers with smaller screen resolutions.

so bassicaly what i want to do is use a different graphic depending on what's happening (if the person has less than 1024x768 screen res or if the user has 1024x768 or above). Bassicaly it's a super duper tricky fluid layout.... thing....

Can this be done or will I just have the face the music?

Different Colors Between Ff And Ie

Similar Tutorials

I am using a table bg mouseover CSS effect. In FireFox and my dreamweaver workspace, the page looks fine. However in IE, the section where I used the CSS effect has a slightly different color.

What could be the cause of this?

Thanks.

wait, i just figured out that its the image that is a different color...

so my new question is, why?

Css Colors Not Working

Similar Tutorials

Hey everyone. I posted this in another forum, but we were unable to get the issue resolved, so I thought I would try posting here.

I am having trouble getting some colors to work on my pages with CSS. I went through and made an index.html, in which I setup all my layout, graphics, colors, etc. I then took that and turned it into header.php and footer.php, with a new index.php file.

My problem is that now when I upload up index.php to the server and go to view it, all the text formatting and layout of the page works fine, but the background, heading, link, etc. colors are just showing up as the defaults. The colors that I am working with are not from the websafe pallet, but I think that they are supported by most browsers (519A00, 5B4C34, 33435A, E5EDF9). Now that I think about it, it cant be browser support because it all works just fine in the index.html file.

The link to the previous forum post is here There was a rather long discussion on possible causes there, but we never found a solution. I would really appreciate any help you may be able to offer.

Thanks in advance,

-Jonathan

No Colors In Firefox

Similar Tutorials

hello everyone,

I can't get colors to show in firefox for the life of me. I have this used by a javascript mutliple times and need different colors. Help please, let me know if you need more info.

Code:

.signalButton{	
	width:80px;
	height:4;
	background-color: #0066FF;
}

Thank You,
Wasim

Alternating Row (tr) Colors

Similar Tutorials

I see that CSS3 will finally have support for this, but I thought I'd stumbled upon support in CSS1 or CSS2(.1) also. I even printed it out, though I can't find it now.
Does anyone know how to alternate row colors in CSS2.1 without resorting to tr.row1 and tr.row2 or scripting?

My Colors Won't Show Up??! Please Help...

Similar Tutorials

I'm trying to get some simple css formatting to work and it works the way I want but not in explorer, it won't show my color/border/image anything attributes until I literally highlight the content via the mouse. And not always. Of course, it works fine in firefox and the css validates so.....please glance over it and see if you can find any errors. thanks!

here's the url
http://www.emotika.com/testing/test.htm

here's the source

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title>

<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;

}

.arrows{
	margin: 0px 0px 2px 5px;
}

.headingrule{
	
	margin-right: 3em;
	margin-left: 1em;
	background-image: url(images/gradient.jpg);
	background-repeat: repeat-x;
}


#maincontent{
	margin-top: 1em;
	margin-bottom: 1em;
	margin-right: 200px;
}

.maincontentbox{
	background-color: #F0F0F0;
	border: 1px solid #CCCCCC;
	margin-left: 3em;
	margin-right: 3em;
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 4px 8px;
}
#rightcontent{
	position: absolute;
	width: 200px;
	top: 1em;
	right: 0px;
	padding: 5px;
	border: 1px solid #CCCCCC;
}

#footer{
	background-color: #F0F0F0;
	clear: both;
	}

#wrapper {
	position: relative;
	width: 100%;
	margin: 0px;
}

-->
</style>
</head>

<body>

<div id="wrapper">
	
	<div id="maincontent">
		
		<div class="headingrule">
			<img class="arrows" src="images/arrows.gif">
			WELCOME...
		</div>
		
		<div class="maincontentbox">
			<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor, 
			dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
			inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor. 
			Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin 
			metus arcu et lectus.  
			</p>
		</div>
	
		<div class="headingrule">
			<img class="arrows" src="images/arrows.gif">
			WEEKLY SPECIALS...
		</div>
		
		<div class="maincontentbox">
		 	<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor, 
			dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
			inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor. 
			Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin 
			metus arcu et lectus.  
			</p>
		</div>
	
	<!--End Main Content Div-->
	</div>
	
	<!-- Absolutely Positioned Right Div {{ Removed from Document Flow }} -->
	<div id="rightcontent"> 
		
			CONTACT INFO
		
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
        <ul>
           	<li><a href="#">Link 1</a></li>
           	<li><a href="#">Link 2</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
	    <p> </p>
	</div>
	
	<!-- Footer Div Stretches Total Width -->
	<div id="footer">
			here's the footer
	</div>
<!--End Wrapper Div -->
</div>

</body></html>

Colors And Spacing In Ie?

Similar Tutorials

Hey all. I am attempting to create a memberlist type page for my website that has a list on the left and when clicked it shows the members information on the right. I have the positioning down and everything but the problem I am running into is how it displays in IE and Firefox. In Firefox my list looks exactly how I would like it to and works fine. In IE however, the png images i used for the "Memberlist Title" and the bottom rounded edges image appear a different color than the list items... . Also, when clicked the list item stays highlighted with the rollover color and I cant figure out why.
Here is my css its at bestinefight.net/memberlist.php
Code:

/* Memberlist */
#navcontainer { 
width: 210px;
margin-left:109px;
}

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
width: 200px;
background-color: #4B4535;
padding: 0px 0px 0px 10px;
border: 0;
}

#navcontainer a:link, #navlist a:visited
{
font-size:10px;
color: #dbdfaa;
text-decoration: none;
border: 0;
padding: 0px 0px 0px 10px;
outline:none;
}

#navcontainer a:hover, #navlist a:active
{
font-size:10px;
background-color: #8B8063;
color: #dbdfaa;
border: 0;
text-decoration:none;
outline:none;
}

#profile_holder {
background-image:url(profile.png);
background-position:top;
background-repeat:no-repeat;
width:300px;
height:200px;
float:right;
margin-right:30px;
}

#profile {
width:260px;
height:180px;
margin: 40px auto;
}

#memberlist {
width:250px;
height:300px;
float:left;
}

#memberlist_title {
background-image:url(memberlist.png);
width:228px;
height:31px;
margin-left:100px;
}

#memberlist_bottom {
background-image:url(memberlist_bot.png);
height:21px;
width:210px;
margin-left:109px;
}

Here is the code for my page.

Code:

<div id="memberlist"><div id="memberlist_title"></div><div id="navcontainer">
<ul id="navlist">
<li><a href="#">Aslad</a></li>
<li><a href="#">Bilos</a></li>

<li><a href="javascript:ajaxpage('memberlist/Boustij.php', 'profile');">Boustij</a></li>
<li><a href="#">Brak</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Diablo</a></li>
<li><a href="#">Equilibruim</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Faller</a></li>
<li><a href="#">GoOsE</a></li>
<li><a href="#">Melik</a></li>

<li><a href="javascript:ajaxpage('memberlist/Mika.php', 'profile');">Mika</a></li>
<li><a href="#">Nekos</a></li>
<li><a href="#">Normanalata</a></li>
<li><a href="#">O'rian</a></li>
<li><a href="#">Pooga</a></li>
<li><a href="#">Romu'lis</a></li>
<li><a href="#">Sena</a></li>
<li><a href="#">Tepor</a></li>
</ul>

</div>
<div id="memberlist_bottom"></div>
</div>
<div id="profile_holder"><div id="profile"></div></div>

Css Links/different Colors

Similar Tutorials

Excuse me but i am a little thick on this one: How do I create different colored link style for say a:

1. navigation bar
2. footer bar
3. main body

Does making classes make sense in this situation

doug