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 class="body" >
<button class="sexy" type="submit">Click this</button>
</body>
<script src="index.js"></script>
</html>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 class="body" >
<button class="sexy" type="submit">Click this</button>
</body>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 };
it's unreadable, your semi-colon placement is not correct
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
correct
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}