Estoy tratando de cambiar el color de fondo de un botón en css. El enlace CSS funciona bien, el botón cambia de color cuando trato de aplicar bootstrap o uso DOM para cambiar el color, pero no cuando uso CSS.
Aquí está el código:
// 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>Su sintaxis CSS es incorrecta. El punto y coma ; debe colocarse después de cada propiedad CSS, no después de cada regla CSS.
.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 no es un C/C++ o cualquier otra cosa que requiera punto y coma. No puede escribir un punto y coma al final del estilo.
Tu escribiste;
.body{ background-color:#CCD6A6 }; .sexy{ background-color: red };pero esta es la correcta;
.body{ background-color:#CCD6A6; } .sexy{ background-color: red; } Debe escribir punto y coma hasta el final de la línea. Como puede ver, la línea termina en : red; . No como };
es ilegible, su ubicación de punto y coma no es correcta
.body{ background-color:#CCD6A6 }; .sexy{ background-color: red };correcto
.body{ background-color:#CCD6A6; } .sexy{ background-color: red; }