CSS div application Issue

HTML-CSS
1

The .bee element is not getting the background or border applied to it. The CSS sheet is set up properly and effecting the h1 element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>You're a bee</title>
    <link rel="stylesheet" href="./messageStylesheet.css">
</head>
<body>
    <h1>Test</h1>
    <div class="bee"></div>
</body>
</html>

:root{
    --bee-stripe-one: yellow;
    --bee-stripe-two: black;
}

.bee{
    background: linear-gradient(
        var(--bee-stripe-one, yellow) 0%,
        var(--bee-stripe-one, yellow) 10%,
        var(--bee-stripe-two, black) 10%,
        var(--bee-stripe-two, black) 20%,
        var(--bee-stripe-one, yellow) 20%,
        var(--bee-stripe-one, yellow) 30%,
        var(--bee-stripe-two, black) 30%,
        var(--bee-stripe-two, black) 40%,
        var(--bee-stripe-one, yellow) 40%,
        var(--bee-stripe-one, yellow) 50%,
        var(--bee-stripe-two, black) 50%,
        var(--bee-stripe-two, black) 60%,
        var(--bee-stripe-one, yellow) 60%,
        var(--bee-stripe-one, yellow) 70%,
        var(--bee-stripe-two, black) 70%,
        var(--bee-stripe-two, black) 80%,
        var(--bee-stripe-one, yellow) 80%,
        var(--bee-stripe-one, yellow) 90%,
        var(--bee-stripe-two) 90%,
        var(--bee-stripe-two) 100%,
    );
    width: 400px;
    height: 400px;
    border: black 1px 1px;
}
h1{
    color: blue;
}
3

Hi @Adran

Try removing the comma at the end.

Happy coding

4

That was it, thank you!

1 Like