Grow your CSS skills. Land your dream job.

Psuedo class change Link colour must be in head?

  • # October 16, 2009 at 5:44 am

    Simple question really. I want to change colour of the links and of course it’s made by the code we all know about (below).

    But it will only work if I put the code in the html document’s head-section. – When I instead try to add it to the stylesheet in a class like "body " – which is supposed to affect the whole site (all sites not only the index etc. ) – well then it wont work.

    Code:
    a:link {
    color: #999;
    }
    a:visited {
    color: #999;
    }
    a:hover {
    color: #999;
    }
    a:active {
    color: #999;
    }

    Isn’t it possible to add these pseudo classes in the css stylesheet?

    Regards

    # October 16, 2009 at 6:07 am

    Shouldn’t be a problem unless there is something else in the stylesheet over-riding them.

    # October 16, 2009 at 7:00 am

    I found where the error is – but how do I fix it?

    Look

    Code:
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #CCC;
    background-color: #000000;
    a:link {color:#FFFFFF}
    a:visited {color:#FFFFFF}
    a:hover {color:#FFFFFF}
    a:active {color:#FFFFFF}
    }

    I it closes too early! The rule closes itself after a:link {color:#FFFFFF}

    # October 16, 2009 at 7:57 am

    Sorry, you have lost me now. What’s the problem?

    # October 16, 2009 at 10:39 am

    ok :) This is the code in the stylesheet.

    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #CCC;
    background-color: #000000;
    a:link {color:#FFFFFF}

    a:visited {color:#FFFFFF}
    a:hover {color:#FFFFFF}
    a:active {color:#FFFFFF}

    }

    I’ve now bolded where the rule close itself (The {} are in yellow). It leaves out the red in the rule. But I need it to be a rule for the hole page so I need it in a "body" -class dont I. So how do I rewrite the rule so it closes WITH the pseudo classes in it – and not leaving some out?

    # October 16, 2009 at 11:11 am

    Take the rules for the links out of the body statement.

    Code:
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #CCC;
    background-color: #000000;
    }
    a:link {color:#FFFFFF}
    a:visited {color:#FFFFFF}
    a:hover {color:#FFFFFF}
    a:active {color:#FFFFFF}
    # October 16, 2009 at 11:57 am

    Silly me, awright! Thank you!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".