title: Applying Css to content inside webview in javafx
body: <p>I am creating a sample app in JavaFx.
  I have loaded a local html file in webview in app. I want to apply style to that loaded html page from the app. When i try to do that the style is applied to entire webview.
  I only want to apply on that loaded html page not the webview.</p>
  
  <p>This is index.html page that I am loading.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  function myFunction() {
      document.getElementById("demo").innerHTML = "Paragraph changed.";
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;h1&gt;My Web Page&lt;/h1&gt;
  
  &lt;p id="demo"&gt;A Paragraph&lt;/p&gt;
  
  &lt;button type="button" onclick="myFunction()" id="btn"&gt;Try it&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is demo.css </p>
  
  <pre><code>*{
      padding: 0;
      margin: 0;
  }
  
  #btn{
      font-weight: bold;
      font-size: 14px;
      padding: 10px 20px;
  }
  
  body {
      background-color: #00ff80; 
      font-family: Arial, Helvetica, san-serif;
  }
  </code></pre>
  
  <p>This is my javafx app code.</p>
  
  <pre><code> Hyperlink hpl3 = new Hyperlink("Load Html File");
      hpl3.setOnAction(new EventHandler&lt;ActionEvent&gt;() {
        @Override public void handle(ActionEvent e) {
          String path = System.getProperty("user.dir");  
          path.replace("\\\\", "/");  
          path +=  "/html/index.html";  
          String path1 = System.getProperty("user.dir");  
          path1.replace("\\\\", "/");  
          path1 +=  "/css/demo.css";  
          webEngine.setUserStyleSheetLocation("file:///" + path1);
          webEngine.load("file:///" + path);   
        }
    });
  </code></pre>