0

I'm trying to make a homepage as per the pset5, and want to change the color and decoration of hyperlinks. The a:link and a:visited tags were editable, but not the other two. Here's my code for reference

a:link
            {
                color: LightSkyBlue;
                text-decoration: none;
            }
            a:hover
            {
                color: LightSkyBlue;
                text-decoration: none;
            }
            a:active
            {
                color: LightSkyBlue;
                text-decoration: none;
            }
            a:visited
            {
                color: LightSkyBlue;
                text-decoration: none;
            }

Here's the whole code I've worked on till now

<!DOCTYPE html>

<html lang="en">
    <head>
        <style>
            body
            {
                background-image:url(https://cdn.pixabay.com/photo/2019/10/27/18/48/new-york-4582500_960_720.jpg);
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-size: 100% 100%;
            }

            #a1
            {
                font-family: didot;
                font-size: 20px;
                padding-right: 15px;
            }

            .small_link
            {
                font-family: didot;
                font-size: 17px;
                padding-right: 15px;
            }

            #p0
            {
                padding: 20px;
            }

            #p1
            {
                color: white;
                text-align: center;
                font-size: 75px;
                font-family: Times New Roman;
                position: absolute;
                top: 35%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
            #p2
            {
                color: white;
                text-align: center;
                font-size: 25px;
                font-family: cursive;
                position: absolute;
                top: 43%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }



            a:link
            {
                color: LightSkyBlue;
                text-decoration: none;
            }
            a:hover
            {
                color: LightSkyBlue;
                text-decoration: none;
            }
            a:active
            {
                color: LightSkyBlue;
                text-decoration: none;
            }
            a:visited
            {
                color: LightSkyBlue;
                text-decoration: none;
            }

        </style>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        <title>My Webpage</title>
    </head>
    <body>
        <p id="p0">
            <a id="a1" href="index.html">Home</a>
            <a class="small_link" href="past.html">past</a>
            <a class="small_link" href="present.html">present</a>
            <a class="small_link" href="future.html">future</a>
        </p>
        <p id="p1">
            Yuvan Seth
        </p>
        <p id="p2">
            my homepage
        </p>

    </body>
</html>
0

In CSS, the rules are applied from unspecific selector to specific, but also from first to last. If two selectors match, and do not differ in specificity, the last one can overwrite anything the others did. You include the CSS after your own, meaning that it replaces part of your CSS. Always put your own CSS last, after the foreign CSS like bootstrap.

Also, it is important to keep a certain order:

  • link
  • visited
  • hover
  • active

(mnemonic "LoVe HAte")

In your example, visited comes after hover, which means that it has precedence over hover. Doesn't matter in that case, as you use the same rules for all four, just specifying a:link should probably do the same.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .