Link style over riding another

[Ian Davies]

Hello

I want to display more than one style of link on a webpage using CSS but an
finding it impossible to do. I wish the menu bar at the top to have
different style of link to those links in the main body.

I thought this would be easy as I have a header page in a separate html to
the body (to make it easy to display the header on each page). However the
link style in the body over rides the link style in the header. I was hoping
they would remain local to their respective pages.

How can I resolve this please

Ian

 

[Neredbojias]

To further the education of mankind, "Ian Davies"

Hello

I want to display more than one style of link on a webpage using CSS
but an finding it impossible to do. I wish the menu bar at the top to
have different style of link to those links in the main body.

I thought this would be easy as I have a header page in a separate
html to the body (to make it easy to display the header on each page).
However the link style in the body over rides the link style in the
header. I was hoping they would remain local to their respective
pages.

Assign a class to the links you want different and style the class as
another link:

<a class="altlink" href="example.com">Example</a>

a:link,a:visited {
background:white;
color:black;
}
..altlink:link,.altlink:visited {
background:blue;
color:red;
}

 

[gil]

The order of specifying the styles determines which ones will be used.
The last style specified for an element will be the one used.

BUT, You should be able to create styles for differently identified
div's allowing you to have different link styles, even on the same page.

on external style sheet (preferred), or internal (on every html page)

....
#header a {text-decoration: none}
#header a:link {color: green;}
....
....
#main a {text-decoration: underline;}
#main a:link {color: red;}
....
etc.


in your body
<div id="header"> header code with links </div>
<!--should use the styles in #header section of stylesheet-->

<div id="main"> main page code with links </div>
<!--should use the style in #main section of stylesheet-->

anything inside the div will use styles specified as id. Remember, you
can only use the same id attribute once per html document.

Gil

At approximately 2006/04/24 16:34, Ian Davies typed these characters:

 

[Toby Inkster]

I want to display more than one style of link on a webpage using CSS but an
finding it impossible to do. I wish the menu bar at the top to have
different style of link to those links in the main body.

A:link { ... }
A:visited { ... }

DIV.menu A:link { ... }
DIV.menu A:visited { ... }

A.special:link { ... }
A.special:visited { ... }

 

[Ian Davies]

Thank you
That worked fine
Ian

To further the education of mankind, "Ian Davies"


Assign a class to the links you want different and style the class as
another link:

<a class="altlink" href="example.com">Example</a>

a:link,a:visited {
background:white;
color:black;
}
.altlink:link,.altlink:visited {
background:blue;
color:red;
}

 

[Toby Inkster]

The order of specifying the styles determines which ones will be used.
The last style specified for an element will be the one used.

That's not entirely true. Specificity is also a key factor. For example:

<style type="text/css">
#green { color: green }
#green2 { color: green }
.red { color: red }
</style>

<p id="green" class="red">
I am green.
</p>

The ID selector is more specific than the class selector, so gets applied
to the paragraph.

More on specificity here:
http://www.w3.org/TR/CSS21/cascade.html#specificity