Replace a CSS sheet-CodePudding

I need to use a second CSS file (style.css). The first one is loaded from an script app and I want to change some styles of the script css loaded.

Any suggestion?

Thanks.

<html>
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
      <link rel="stylesheet" href="style.css">

  </head>
  <body>
    <div ct-app><noscript>JS needed</noscript></div>
<script type="text/javascript">
var AT = {
  ABE: {
    
  }
};
(function() {
  AT.ABE.Settings.version = '1.0';
  var cts = document.createElement('script'); cts.type = 'text/javascript'; cts.async = true;
  cts.src = '//ggl.com/abe'   AT.ABE.Settings.version   '/at_loader.js?'   new Date().getTime();
})();
</script>
      
      
</body>
</html>

CodePudding user response：

If you just want to use the new styles instead, you can find the link element and just replace the href with the path to the other file. Like this:

document.querySelector("link[href=style.css]").href = "path/to/new/file.css";

If you want to override some styles, you'll need to make sure the new file is loaded after the first and then either use more specific selecors or !important. You can't really "edit" the file in the browser before loading it though, which is what it sounds like you might be asking about.

CodePudding user response：

If you want to edit the css and not to replace all the css, you can use inline style or you can use bootstrap.

CodePudding user response：

!important to override css, not recommended