The <style> tag is like any other HTML tag

I saw this trick mentioned by Wes Bos on YouTube and wanted to share it because I thought it was pretty cool.

Did you know that the style tag can be used as any other HTML tag? That means if you display is as a block, it will display your CSS as text on your website.

That also means that you can add contenteditable to the tag so that you can edit the CSS and see the changes in real time. Nifty, right?

You can see and edit the CSS in the CodePen below

I've added some white-space styling and some javascript to hinder the browser from adding <div>s to the style tag when you hit enter, but other than that you can pretty much edit, add or remove whatever CSS you want. A transition is also added to all elements so that you can better see the changes. Try for example adding a font-size or color.

While I don't think this has any real world applications, I never thoght about how all HTML tags actually are HTML tags and can be used in the same way as all the others.