1 min read
By Einar Afiouni
December 20, 2022
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
<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
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.