HTML Cheat Sheet 101 #1

See this in action: a.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf8'/>
<title>HTML Page</title>
<style>
.big {
  font-size: 1.5em;
}
.red {
  color: red;
}
.orange {
  color: #f70;
}
.draw-a-box-around {
  padding: 1em;
  margin: 1em;
  border-radius: 1em;
  border: 1px solid black;
  box-shadow: 1rem 1rem 1rem black;
}
.wide {
  width: 80vw;
}
body {
  padding: 5vh 5vw; /* top-bottom left-right */
}
</style>
<script>
window.addEventListener("load",_ => {
  let div = document.createElement("div")
  div.classList.add("red")
  let span = document.createElement("span")
  span.classList.add("big")
  span.textContent = "Hello World says Mr Flibble!"
  div.append(span)
  document.body.append(div)
})
</script>
</head>
<body>
<h1>Biggest heading</h1>
<h2>Subheading slightly smaller</h2>
<h3>Smaller again</h3>
<h4>and again</h4>
<div class='draw-a-box-around'>
<p>right down to</p>
<h6>H6</h6>
<div>A div is a generic block level element</div>
<p>A <span class='orange'>span</span> is a generic inline element</p>
<p class='big'>BIG</p>
</div>
</body>
</html>