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