CSS style not applying to the html page

Question

So I have the code below.

I am expecting the .container {background-color: red !important;} to apply color to the HTML page. But for some reason, it is not happening.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title></title>
  <link href="https://fonts.googleapis.com/css2?family=Varela+Round|Alex+Brush|Plus+Jakarta+Sans" rel="stylesheet" />
  <style type="stylesheet">
    .container { background-color: red !important; }
  </style>
</head>

<body>
  <div class="container" style="
        background: #ffffff url('assets/image.jpg') no-repeat center center;
        height: 230px;
      "></div>
</body>

</html>

@LeeTaylor - I believe that is incorrect-- their CSS rule contains an `!important`. — Alexander Nied, Jun 29 '22 at 16:34

score 4 · Accepted Answer · answered Jun 29 '22 at 16:33

This is because you have errantly included the type="stylesheet" attribute on your <style> element; removing it fixes the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link
      href="https://fonts.googleapis.com/css2?family=Varela+Round|Alex+Brush|Plus+Jakarta+Sans"
      rel="stylesheet"
    />
    <style>
      .container {
        background-color: red !important;
      }
    </style>
  </head>
  <body>
    <div
      class="container"
      style="
        background: #ffffff url('assets/image.jpg') no-repeat center center;
        height: 230px;
      "
    ></div>
  </body>
</html>

Today I learned that [`type` *shouldn't* be provided](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#attr-type). — David, Jun 29 '22 at 16:37

CSS style not applying to the html page

1 Answers1