0

I'm reading about Controlling inheritance using universal values in this page.

I don't get why third link is black if browser default color for links is blue (is that correct?).

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            color: green;
        }

        .inherited a {
            color: inherit;
        }

        .reset a {
            color: initial;
        }

        .unset a {
            color: unset;
        }
    </style>
</head>

<body>

    <ul>
        <li>Default <a href="#">link</a> color</li>
        <li class="inherited">Inherit the <a href="#">link</a> color</li>
        <li class="reset">Reset the <a href="#">link</a> color</li>
        <li class="unset">Unset the <a href="#">link</a> color</li>
    </ul>

</body>

</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
user3132457
  • 789
  • 2
  • 11
  • 29

1 Answers1

-1

The default color for links is blue but here you are setting the attribute for 'li' the initial color for 'li' is black so that is the reason you're link is turning into a black one

Mohammed Khan
  • 118
  • 9