Live Editing CSS in Presentations

I’ve been doing a number of technical talks lately that involve a lot of code. It’s often hard to get across a coding concept when you’re only showing text on the screen. As of recently, I’ve come up with a good way to show my CSS example snippets update live, without the need for JavaScript. Here’s what that looks like:


You can actual click on and edit the above code to see the element’s style update live. This is using two specific techniques. One, I’ve added contenteditable to my <style> element that contains the CSS. Second, I’ve made that same <style> tag visible by setting it’s style to display:block;.

Feel free to use this little trick in your next set of slides, or let me know if you use other nifty tricks in your HTML, CSS & JS slide decks.

This little trick is really handy, and you can even take it one step further. For some of my talks I’ve added the scoped property to the <style> element. This can ensure your selectors stay nice and clean. Unfortunately scoped is only available as an experimental API in Chrome right now, and you have to turn support on for it via chrome://flags


Bretton MacLean Posted: Oct 29, 2012 @ 7:51pm

Sweet tip – thanks!

Scott Vinkle Posted: Mar 17, 2013 @ 12:41pm

It seems like you can only alter styling for the originally defined selector. I can alter in any way I chose, but if I add something like p { color: green; }, none of the p tags are effected. I wonder why that is?

Michael Blume Posted: Mar 25, 2014 @ 4:04pm

Scott, I realize your comment was from last year, but this may have been due to an old browser (or IE), or a setting in your browser’s config. Otherwise, it works in FF.

Leave a Reply: