SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Dec 2000
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi guys,

    need some of your expertise.

    for example here's a sample from my external css.

    a:link, a:active { text-decoration: underline; color: #0000ff }


    if I want to override these colors for a certain link, how would I do it?

    Appreciate your help.

    p/s: pls code a sample html.thanks

  2. #2
    SitePoint Enthusiast Vman's Avatar
    Join Date
    Feb 2001
    Location
    Australia
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an example.

    Create a new style - I was creative and called mine link2.

    .link2 { color: #FF0000}
    a:link, a:active { text-decoration: underline; color: #0000ff }

    Now if put the following into your page it will look like a normal link
    <a href="#">testing</a>

    Now if you add the 'class' setting to the tag it will now use the 'link2' colour.
    <a href="#" class="link2">Testing2</a>

    With CSS a simple rule to remember is that the sytle closest to the content is the one that will be used.
    Applied styles will overide default as they are closer (sort of if you get what I mean.)

    Hope this helps.

  3. #3
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also do this if your request defers slightly from the above.

    if you want a certain section of the page, say the top part with the color specified in your external css style sheet, and the resat of the page with another color.

    at that bridge point ( which divides the page into the 2 sections ), add another of these tags


    <style type="text/css">
    a:links { text-decoration: underline; color: #FFFFFF }
    </style>

    all links after this tag will be white.


    well..use this method to manipulate your page display.
    Last edited by lynlimz; Feb 12, 2001 at 08:50.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  4. #4
    SitePoint Member
    Join Date
    Dec 2000
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about a.active and a.visited?

    Can I apply all three variables at the same time?

    p/s: sample pls..sorry as I'm not that familiar w/ css.

    thanks

  5. #5
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I apologise for my mistake... its
    a:link instead of a.link

    and yes, you can apply to any css style you want to overwrite, that includes a:active and a:visited.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  6. #6
    SitePoint Member
    Join Date
    Dec 2000
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    /////
    .link2 { color: #FF0000}
    a:link, a:active { text-decoration: underline; color: #0000ff }

    Now if put the following into your page it will look like a normal link
    <a href="#">testing</a>

    Now if you add the 'class' setting to the tag it will now use the 'link2' colour.
    <a href="#" class="link2">Testing2</a>
    ////

    I mean is it posibble to place

    <a href="#" class="link2" class="hover2" class="visited2">Testing2</a>

    of course those link2,hover2 and visited2 are defined at the css?

  7. #7
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh..icic..
    do it like this in your css style sheet

    a.link2:active {}
    a.link2:visited {}
    a.link2:link {}


    hope it answers your questions
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  8. #8
    SitePoint Member
    Join Date
    Dec 2000
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If i were to follow to use it as an external style sheet whereby all active2, visited2 and link2 are defined.

    how do it code it..im having problems here.

    here's what i want...

    XXXXXX <--- original colors

    YYYYYY <---- active2, visite2 & link2 colors

    XXXXXX <--- original colors



    thanks...

  9. #9
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <a href="#">xxxx</a>
    <a class="link2" href="#">xxxx</a>
    <a href="#">xxxx</a>
    Hope this helps.

    Shane

  10. #10
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's how you would do it.
    [code]
    a:link {}
    a:visited {}
    a:active {}
    a:hover {}

    a.yourone:link {}
    a.yourone:visited {}
    a.yourone:active {}
    a.yourone.hover {}

    original link: <a href=""></a>
    special link : <a class="yourone" href=""></a>
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •