<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.