Css for the tag <body> not displaying appropriate output-CodePudding

html

<!DOCTYPE html>
<html>
  <head>
    <title>Time</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <div id="clock"></div>

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

Css

@import url('https://fonts.googleapis.com/css?family=Roboto');

body{
    background-color: #141516;
}

#clock {
    font-family: 'Roboto', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    color: rgb(168, 11, 134);
}

@media (max-width: 600px) {
    #clock {
        font-size: 40px;
    }
}

@media (max-width: 400px) {
    #clock {
        font-size: 30px;
    }
}

I am expecting the whole page to turn into that specific background color mentioned in the body's css

I want to point that out that the #clock and other css stuff is working but just not the body's css

I want to apologize beforehand if the way of posting my problem is unprofessional. Its my first time posting something on stack overflow

CodePudding user response：

The background-color is overwritten by this import :

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

Either set !important to the background
or try a different bootstrap import

CodePudding user response：

I tried your code and you need to put !important because the bootstrap import is over riding the style:

body{
    background-color: #141516!important;
}