Link Colors problem. Probably an easy one.

mechro99 · Nov 23, 2002

Hi,

I am using Frontpage to make a page and I am having difficulty with my links. I don't want to have a set color for the text links, if I don't have to. Also, a border shows up on all of my graphic links, which I'd really like to get rid of. Any help would be great for this probably easy problem to fix.

Thanks,
Dan

palbano · Nov 23, 2002

<img border="0" ...>

for the links you can assign them different css class attributes then make the colors whatever you want in your stylesheet.

Good luck
-pete

mechro99 · Nov 23, 2002

Can you give me an example? I've never used CSS before. I know what you're talking about, but I'll probably need to copy it from somewhere and make the changes.

Tarwn · Nov 24, 2002

Here is a set of examples for changing the style for your links:

Code:

Inline style, changing the style for a single tag:
<a href=&quot;#&quot; style=&quot;color:#999922;background-color:#eeeeee;text-decoration:none;&quot;>Click Me</a>
Style:
   color: refers to the foreground or text color - uses hex rgb or a word like red, blue, green, yellow, etc
   background-color: refers to the background color for the tag
   text-decoration: refers to, well, the text-decoration, in this case none will remove the underline for the link

Page wide styles, two methods:
<html>
<head>
<style>
   a{
      color:blue;  /* this is a comment */
      /* RGB Colors: 6 digit base 16 number, the first two
         stand for amount of red, second pair is green, last pair is blue
         values range from 00 to FF (0 to 255 in base 10) */
      background-color: #aaaaee;   /* this should be a light blueish color */
      font-family:tahoma, serif; /* browser will first try to find font tahoma, if it doesn't exist it will look at the next one (serif in this case)
   }
   a:hover{  /* Seperate style for when mouse hovers over link */
      color:green;
      font-weight: bold; /* Numerical or words here, I believe lighter, light, normal, bold, bolder but I could be wrong */
   }
</style>
<body>
<a href=&quot;#&quot;>Click Me!</a>
</body>
</html>

The above way will change all links on the page to have the defined look and feel.

The second way to define these inside a document is to define your own classes:
<html>
<head>
<style>
   .myLink{
      color:red;
      background-color:green; /* ick */
      border:1px solid #cccccc; /* a 1 pixel solid border*/
   }
   .myLink:hover{
      color:#883333;
      background-color:#aabbaa;
      border:1px dashed #888888;
   }
</style>
</head>
<body>
<a href=&quot;#&quot;>Normal Link</a>
<a hred=&quot;#&quot; class=&quot;myLink&quot;>Special link</a>
<span class=&quot;myLink&quot;>Note that this will look like your link, but will not change when you mouse over it as it does not have the hover event like a link does.</span>
</body>
</html>

The last way to define styles (not counting inside javascript or vbscript) is to create a stand alone file like so:

   .myLink{
      color:red;
      background-color:green; /* ick */
      border:1px solid #cccccc; /* a 1 pixel solid border*/
   }
   .myLink:hover{
      color:#883333;
      background-color:#aabbaa;
      border:1px dashed #888888;
   }

For now we'll pretend we saved the above as myStyle.css in the same directory as our html file.

Now by referencing this in your document head like so:
<link rel=&quot;stylesheet&quot; href=&quot;myStyle.css&quot; type=&quot;text/css&quot;>

and it will act exactly as if we had written the style into style tags in our head. The great thing about this is if you have a large number of pages and want to keep the look and feel the same, you can simply include the same style sheet in all the files, and if you need to change it you will only need to change it in one place.

One last note:
You saw above three ways to define styles, but what happens if an object is defined by all three?
The way styles work is by scope. The swcope of an object, or tag, starts globally and works it's way down to the local, or inline style.
So when the page is first loaded it gets it's generic settings from the browser. Then any generic definitions from the external stylesheet or styles in the style tags are applied (generic meaning like above when we redefined the style for the

Code:

<a>

tag). Then any class definitions that apply to an object are applied (such as the myLink definitions above). Then finally any inline style in the tag is applied (such as when you have the style="" attribute inside the tag).

So in the following case:

Code:

<html>
<head>
<style>
   a{
      color:red;
   }
   .myLink{
      color:yellow;
   }
</style>
</head>
<body>
<a href=&quot;#&quot;>What color?</a>
<a href=&quot;#&quot; class=&quot;myLink&quot;>What color?</a>
<a href=&quot;#&quot; style=&quot;color:green;&quot; class=&quot;myLink&quot;>What color?</a>
</body>
</html>
</body>

The a tag will first be set to blue (generic tag color), then red (due to the a style definition), then yellow (myLink style definition), then green(inline style definition).
Of course the user only sees the end result of this, the green link.

Hope this helps you get started with CSS, theres quite a bit out there that you can do with it.

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
For my next trick I will pull a hat out of a rabbit (if you think thats bad you should see how the pigeon feels...)

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Link Colors problem. Probably an easy one.

mechro99

Programmer

palbano

Programmer

mechro99

Programmer

Tarwn

Programmer

Similar threads

Part and Inventory Search

Sponsor