Link style over riding another

Discussion in 'HTML' started by Ian Davies, Apr 24, 2006.

  1. Ian Davies

    Ian Davies Guest

    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
    Ian Davies, Apr 24, 2006
    #1
    1. Advertising

  2. Ian Davies

    Neredbojias Guest

    To further the education of mankind, "Ian Davies"
    <> vouchsafed:

    > 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;
    }

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Apr 24, 2006
    #2
    1. Advertising

  3. Ian Davies

    gil Guest

    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:

    > 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
    >
    >
    gil, Apr 24, 2006
    #3
  4. Ian Davies

    Toby Inkster Guest

    Ian Davies wrote:

    > 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 { ... }

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Apr 24, 2006
    #4
  5. Ian Davies

    Ian Davies Guest

    Thank you
    That worked fine
    Ian

    "Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> wrote in
    message news:Xns97AF8DF1CFC5Ahttpwwwneredbojiasco@208.49.80.251...
    > To further the education of mankind, "Ian Davies"
    > <> vouchsafed:
    >
    > > 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;
    > }
    >
    > --
    > Neredbojias
    > Infinity has its limits.
    Ian Davies, Apr 25, 2006
    #5
  6. Ian Davies

    Toby Inkster Guest

    gil wrote:

    > 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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Apr 25, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Michael Borgwardt

    Re: Over-riding equals method dilemma

    Michael Borgwardt, Aug 14, 2004, in forum: Java
    Replies:
    23
    Views:
    711
    Chris Uppal
    Aug 23, 2004
  2. Brian Salter-Duke

    Over-riding an error

    Brian Salter-Duke, May 2, 2009, in forum: C Programming
    Replies:
    21
    Views:
    2,208
    Richard Bos
    May 9, 2009
  3. John
    Replies:
    4
    Views:
    337
  4. Steven D'Aprano

    Inheriting methods but over-riding docstrings

    Steven D'Aprano, Jan 16, 2010, in forum: Python
    Replies:
    16
    Views:
    428
    Gabriel Genellina
    Jan 22, 2010
  5. mk

    Over(joy)riding

    mk, Feb 17, 2010, in forum: Python
    Replies:
    7
    Views:
    255
    Bruno Desthuilliers
    Feb 17, 2010
Loading...

Share This Page