CSS not changing style of a button
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
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>
أضف إجابة