Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <title>JavaScript and HTML</title>
  <meta charset="utf-8"/>
  <script>
    function changeTitleCSSStyle() {
      var title = document.querySelector("#mainTitle");
      title.style.color = 'black';
      title.style.backgroundColor = "yellow";
      title.style.border = "5px dashed red";
    }
  </script>
<style id="jsbin-css">
h1 {
  color:red;
  background-color:lightGreen;
  border:12px solid violet;
  padding: 5px;
  border-radius: 15px;
  text-align: center;
}

p, h1 {
  font-family: cursive
}

p, img, button {
  margin-left:50px;
}
</style>
</head>
  <body>
    <h1 id="mainTitle">My home page</h1>

    <p>This is an example of interactivity between JavaScript and the HTML content of a document.</p>
    <button onclick="changeTitleCSSStyle();">Click me to change the CSS colors of the title of the page</button>
  <script id="jsbin-javascript">
var video;

function init() {
  // function called when the page is loaded

  video = document.querySelector("#myVideo");

  // For initial value
  video.width = window.innerWidth;
  video.height = window.innerHeight;

  // For dealing with window resize
  window.onresize = function() {
      video.width = window.innerWidth;
      video.height = window.innerHeight;
  };

}
</script>


<script id="jsbin-source-css" type="text/css">h1 {
  color:red;
  background-color:lightGreen;
  border:12px solid violet;
  padding: 5px;
  border-radius: 15px;
  text-align: center;
}

p, h1 {
  font-family: cursive
}

p, img, button {
  margin-left:50px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var video;

function init() {
  // function called when the page is loaded

  video = document.querySelector("#myVideo");

  // For initial value
  video.width = window.innerWidth;
  video.height = window.innerHeight;

  // For dealing with window resize
  window.onresize = function() {
      video.width = window.innerWidth;
      video.height = window.innerHeight;
  };

}</script></body>
</html>