<h1>Style tags set to display: block</h1>

<p>
  Here’s an example of some code that you can edit and see everything update instantly:
</p>

<style contenteditable>
  p {
    color: black;
  }
</style>

<p>
  By updating the code above you should see the color of the text change as you type! This is done without JavaScript, just by setting the <a href='https://twitter.com/GundersenMarius/status/1017867573550108672' target="_blank">style tag to display: block.</a>
</p>
html,
body {
  height: 100%;
}

html {
  background-color: #333;
}

body {
  max-width: 700px;
  background-color: white;
  margin: 0 auto;
  padding: 50px;
  font-size: 18px;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen”,
    “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”,
    sans-serif;
}

style {
  display: block;
  background-color: #eee;
  padding: 20px;
  font-family: monospace;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.