CSS not changing style of a button-CodePudding

I am trying to change the background color of a button in css. The CSS link is working fine, the button changes color when I try to apply bootstrap or use DOM to change the color, but not when I use CSS.

Here's the code:

// let sexybutton= document.querySelector('.sexy');

// sexybutton.style.backgroundColor="red";

// console.log(sexybutton.style);

//Currently commented it out because I do not want to do it this way. Put this here to inform that the button style changes using this method.

.body{
    background-color:#CCD6A6
};

.sexy{
    background-color: red
};

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://kit.fontawesome.com/fdee82af88.js" crossorigin="anonymous"></script>

  <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/album/">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Permanent Marker&display=swap" rel="stylesheet">

  <!-- Bootstrap core CSS -->
  <link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  
  <link rel="stylesheet" href="style.css">
</head>
<body  >
    <button  type="submit">Click this</button>
</body>

<script src="index.js"></script>
</html>

CodePudding user response：

Your CSS syntax is wrong. The semi-colon ; must be placed after each CSS property, not after each CSS rule.

.body{
    background-color:#CCD6A6;
}

.sexy{
    background-color: red;
}

<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">

<body  >
    <button  type="submit">Click this</button>
</body>

CodePudding user response：

CSS isn't a C/C or anything else that requires semicolon. You can't type a semi-colon to end of the style.

You wrote;

.body{
    background-color:#CCD6A6
};

.sexy{
    background-color: red
};

but this is correct one;

.body{
    background-color:#CCD6A6;
}

.sexy{
    background-color: red;
}

You must to write semicolon to end of the line. As you can see, line ending with : red;. Not like };