Search code examples
htmlcssnav

This specific CSS property is not applied (crossed out in inspection mode)

I am making a simple website as a newbie using bootstrap 5. While making a navigation bar and personally customizing it, I noticed that one of the CSS property wasn't applying at all. Specifically, my font size on my logo does not change despite the constant changing and fixing.

I feel like this is definitely an easy solution but I just don't get it.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link rel="stylesheet" href="styling.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <h1 class="navbar-brand" href="#">HELP ME OUT</h1>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav m-auto">
                    <li class="nav-item">
                        <a class="nav-link active navtag" aria-current="page" href="dashmain.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Guide</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#">Dropdown</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link">Disabled</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    background-color: #408EC6;
}

.navbar-brand{
    font-size: 2.5rem;
    padding: 5px;
    border-bottom: 4px solid black;
    border-left: 4px solid black;
    user-select: none;
}

.navbar-brand:hover {
    animation: color-change 3s infinite;
}

@keyframes color-change {
    0% {
        color: #1E2761;
    }

    15% {
        color: #7A2048;
    }

    25% {
        color: wheat;
    }

    50% {
        color: #1E2761;
    }

    75% {
        color: #7A2048;
    }

    80% {
        color: wheat;
    }

    100% {
        color: #1E2761;
    }
}

I already did some tinkering like using the right metric and even changing the html tag. It was working before I remember. However, right after I finished applying a hover animation for the text, it just didn't change to my preferred size.

Solution

  • Your styling.css file is above the bootstrap css file, which results in your style being overridden by bootstrap. Bring that down below the bootstrap css file for your styles to apply.