timcarl/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
body {
  margin: 0;
  padding: 0;


}


#h1_tag {
  display: block;
  border: 2px solid #000;
  padding: 10px;
  margin: auto;
  width: 30%;
  text-align: center;
  background-color: skyblue;

  }

div {
  margin: 15px;
}

div b {
  color: red;

}

div em {
  color: blue;
}


div p {
  position: relative;
  letter-spacing: 0.1em
  overflow: auto;
  background: #f9ffe6;
  text-decoration: none;
  padding: 10px;

}

button {
  display: block;
  margin: auto;

}

button:hover {
  color: orange;
  background-color: #000;

}


.container {
   background-color: #eee;
   display: block;
   width: 50%;
   margin: auto;
   padding: 15px;
   min-width: 365px;


}
</style>
</head>
<body>
  <h1 id="h1_tag">The id attribute</h1>

  <p id="demo"></p>


  <div class="container">
    <p id="para01">The <a href="https://www.w3schools.com/tags/tag_a.asp"><b>id</b></a> attribute specifies a <em>unique</em>
  id for the  HTML element { p } inside this body. It must be unique. No two can be alike.</p>
   </div>

  <div class="container">
    <p id="para02">
      Inside the body is a { p } element with an id attibute with a
      value of "demo". The string literal "demo" could be anything you wish to name
      it.  The id attributes value can be used by both Javascript and CSS to perform tasks.

    </p>
    </div>
  <button onclick="foo()">Try me</button>
   <script>


  </script>


<script id="jsbin-javascript">
function foo() {
   var x = document.querySelector("h1");
   x.style.backgroundColor = "red";
}
</script>


<script id="jsbin-source-css" type="text/css">body {
  margin: 0;
  padding: 0;


}


#h1_tag {
  display: block;
  border: 2px solid #000;
  padding: 10px;
  margin: auto;
  width: 30%;
  text-align: center;
  background-color: skyblue;

  }

div {
  margin: 15px;
}

div b {
  color: red;

}

div em {
  color: blue;
}


div p {
  position: relative;
  letter-spacing: 0.1em
  overflow: auto;
  background: #f9ffe6;
  text-decoration: none;
  padding: 10px;

}

button {
  display: block;
  margin: auto;

}

button:hover {
  color: orange;
  background-color: #000;

}


.container {
   background-color: #eee;
   display: block;
   width: 50%;
   margin: auto;
   padding: 15px;
   min-width: 365px;


}</script>

<script id="jsbin-source-javascript" type="text/javascript">function foo() {
   var x = document.querySelector("h1");
   x.style.backgroundColor = "red";
}
   </script></body>
</html>

## jsbin.modowoy.css
body {
  margin: 0;
  padding: 0;


}


#h1_tag {
  display: block;
  border: 2px solid #000;
  padding: 10px;
  margin: auto;
  width: 30%;
  text-align: center;
  background-color: skyblue;

  }

div {
  margin: 15px;
}

div b {
  color: red;

}

div em {
  color: blue;
}


div p {
  position: relative;
  letter-spacing: 0.1em
  overflow: auto;
  background: #f9ffe6;
  text-decoration: none;
  padding: 10px;

}

button {
  display: block;
  margin: auto;

}

button:hover {
  color: orange;
  background-color: #000;

}


.container {
   background-color: #eee;
   display: block;
   width: 50%;
   margin: auto;
   padding: 15px;
   min-width: 365px;


}

## jsbin.modowoy.js
function foo() {
   var x = document.querySelector("h1");
   x.style.backgroundColor = "red";
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	body {
	margin: 0;
	padding: 0;


	}


	#h1_tag {
	display: block;
	border: 2px solid #000;
	padding: 10px;
	margin: auto;
	width: 30%;
	text-align: center;
	background-color: skyblue;

	}

	div {
	margin: 15px;
	}

	div b {
	color: red;

	}

	div em {
	color: blue;
	}


	div p {
	position: relative;
	letter-spacing: 0.1em
	overflow: auto;
	background: #f9ffe6;
	text-decoration: none;
	padding: 10px;

	}

	button {
	display: block;
	margin: auto;

	}

	button:hover {
	color: orange;
	background-color: #000;

	}





	.container {
	background-color: #eee;
	display: block;
	width: 50%;
	margin: auto;
	padding: 15px;
	min-width: 365px;


	}
	</style>
	</head>
	<body>
	<h1 id="h1_tag">The id attribute</h1>

	<p id="demo"></p>


	<div class="container">
	<p id="para01">The <a href="https://www.w3schools.com/tags/tag_a.asp"><b>id</b></a> attribute specifies a <em>unique</em>
	id for the HTML element { p } inside this body. It must be unique. No two can be alike.</p>
	</div>

	<div class="container">
	<p id="para02">
	Inside the body is a { p } element with an id attibute with a
	value of "demo". The string literal "demo" could be anything you wish to name
	it. The id attributes value can be used by both Javascript and CSS to perform tasks.

	</p>
	</div>
	<button onclick="foo()">Try me</button>
	<script>


	</script>






	<script id="jsbin-javascript">
	function foo() {
	var x = document.querySelector("h1");
	x.style.backgroundColor = "red";
	}
	</script>


	<script id="jsbin-source-css" type="text/css">body {
	margin: 0;
	padding: 0;


	}


	#h1_tag {
	display: block;
	border: 2px solid #000;
	padding: 10px;
	margin: auto;
	width: 30%;
	text-align: center;
	background-color: skyblue;

	}

	div {
	margin: 15px;
	}

	div b {
	color: red;

	}

	div em {
	color: blue;
	}


	div p {
	position: relative;
	letter-spacing: 0.1em
	overflow: auto;
	background: #f9ffe6;
	text-decoration: none;
	padding: 10px;

	}

	button {
	display: block;
	margin: auto;

	}

	button:hover {
	color: orange;
	background-color: #000;

	}





	.container {
	background-color: #eee;
	display: block;
	width: 50%;
	margin: auto;
	padding: 15px;
	min-width: 365px;


	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">function foo() {
	var x = document.querySelector("h1");
	x.style.backgroundColor = "red";
	}
	</script></body>
	</html>