Grow your CSS skills. Land your dream job.

Show and Edit Style Element

Published by Chris Coyier

Kind of a classic little trick for ya'll today. You know the <style> blocks you can put in the <head> of your HTML to do styling? You don't actually have to put those in your head, they can be anywhere on the page.

What's more? It's just an element like any other. The default stylesheet of all browers makes it display: none;.

If you move it down into the body and reset it to display: block; you can see the very code which is applying style to that page. Might as well make it look nice and code-y to eh?

body style {
	display: block;
	background: #333;
	color: white;
	font: 13px/1.8 Monaco, Mono-Space;
	padding: 20px;
	white-space: pre;
}

What's more? You can give it the HTML5 attribute of contenteditable and you can literally edit the CSS right there and watch it effect the page.

<style scoped contenteditable>body { 
  background: green; 
}</style>

View Demo

That's how all the code on The Shapes of CSS page is done. Not only is it just kinda neat, but it's very useful on a page like that so you don't have to maintain the CSS in two places.

I don't think it's a very good practice in general, outside of CSS demos. <style> blocks in general I'd go so far as to say are bad practice unless it's a really specific third-party scenario like where injecting styles is the most efficient way to styling newly injected third-party content.

Also for the record, it's not invalid to use <style> outside of the <head> as long as you use the scoped attribute and it's the first child of it's parent. Otherwise it is invalid. The scoped attribute (although currently supported in no browsers) is supposed to imply that the styles within only apply to that parent element and nowhere else. Learn more about it.

Comments

  1. Awesome trick

  2. My first comment but I have been following the site for quite a while. Great tip!

  3. Wonderful tip. In safari it seems to work only for the background property in your demo…. Does it works only for properties that have been previously declared!?

    Editor’s Note: Truls Larsen wrote in (after the comments for this article had been closed) to let me know there is something about line breaks that make it stop working. You could use Shift+Enter to visually make a new line and have it still work.

    • Permalink to comment#

      in chrome, I found it only works when you put the new rules on the same line as the first rule. in other browsers it seems to work as expected.

      linked image

    • I found the same issue in chrome on Mac OS X.

      All statements had to be on the same line to become active…

  4. Cool trick! I wonder if there would be some way to combine this with the HTML5 color picker?

  5. Hugo
    Permalink to comment#

    That awesome! Win!

  6. Omegakenshin
    Permalink to comment#

    Great trick thanks for the share!!

  7. Permalink to comment#

    Wow this is a great trick! And like mluzitano said that color picker would be a nice feature.

  8. Keiron Lowe
    Permalink to comment#

    Brilliant Idea, although I’ve got to agree with @Luciano Mammino, I could only get it to work on the body element, I tried setting the body to tranparent and the html to blue but it didn’t work.

  9. Pretty neat, could prove to be a great learning tool for some!

  10. Dude that is sick! nice work! A bona fide trick :)

  11. SpeedGun
    Permalink to comment#

    Now that is a CSS trick, of course I would hope everyone knows you can put style elements in the body.

  12. Simeon
    Permalink to comment#

    Great trick

  13. Yes, it’s very nice, It helps me a lot during my work~

  14. This is probably a question for another time, but I was playing with the live demo and added style { position: absolute; } to try to break it. When I did that, the box was outlined and a tab popped up above it, allowing me to drag and and drop the box at will.

    Is this some HTML5 voodoo or some JavaScript/jQuery madness?

    • O'Ryan
      Permalink to comment#

      I noticed that too. couldn’t figure out what that was from?
      It had resizing handles as well… hmm

  15. Permalink to comment#

    It seems, if you use ‘display: inline-block’ rather then ‘block’, you can avoid the annoying generation when pressing enter in the edited style tag!

  16. Whats more, you can wrap this in a server side scripting if statement (PHP, Ruby, JSP, whatever your using) to only print this if ur on your staging server and not on your live server.

    Really like it. Thanks CSS-tricks, I think I will adopt this. Whats more, Im gonna tell my friends who are web developers too.

  17. Wow this is an amazing trick, never thought of that!
    That is so cool, this is going to save me so much time!

  18. I used this trick too, in my Front Trends slides. Anne Van Kesteren came up with it originally.
    However, it’s a bit too limiting (you can’t just show the declarations, vendor prefixes are displayed) so I’m not using it any more.

  19. Permalink to comment#

    even though “scoped” styles are supposed to apply only to the children and immediate parent, I’ve found that many browsers will still apply the rules to anything that matches that selector.

    e.g.:

    <!DOCTYPE html><html><head>
    <style> p{ color: red; } </style>
    </head><body>
    <p>this should be red.</p>
    <div>
    <style scoped> p{ color: blue; } </style>
    <p>this should be blue.</p>
    </div>
    </body></html>

    Both paragraphs are blue in Chrome 9, Firefox 3.6, and Opera 10. I’m not sure, exactly, where (or if) browser support starts for “scoped,” but it’s worth knowing that you shouldn’t rely on it to resolve rule conflicts.

    • Permalink to comment#

      (this was supposed to be in reply to Bronislav Klucka’s comment above)

    • No browser yet supports scoped styles, so there’s no reason for that to work. But it’s definitely an interesting new feature that could be quite useful in the future.

    • I wasn’t saying, it’s working now :). I was just referring to validity / good practice issues

    • Permalink to comment#

      @Louis: thanks, I didn’t think so, but I hadn’t tested in any browsers other than the ones I mentioned.

      @Bronislav: Of course, I didn’t mean to imply that you were. I just thought it was worth mentioning, since “scope” is a pretty neat concept – and, since it’s not terribly obvious that it doesn’t actually work yet.

  20. That final HTML 5 bit was pretty brilliant. This is exactly why I love this site — it never ceases to amaze me what CSS is capable of.

  21. Excelente explicacion, muy didactico y con el demo mas aun queda todo claro. los felicito.

  22. O'Ryan
    Permalink to comment#

    I noticed on the shapes of css page that after the DOM updates i have to re-click where i want to edit. And the backspace or delete commands didn’t work. there seemed to be a bunch of quirky things while editing anything in there. strange…

    Win7
    Firefox 3.6

  23. Jake
    Permalink to comment#

    “It’s not valid (or good practice) but it works. ”

    Pretty much sums up this site…

  24. Ant
    Permalink to comment#

    Nice. This would be awesome for debugging, since I don’t link some things in Firebird (how it reformat original code, etc).

  25. SIMPLEST/COOLEST!
    Thanks. Dave

  26. Thanks chris, that’s not css tricks its css magic. :) . Sadly creating new lines seems impossible (at least in ff 3.6 mac). But I suppose that it will not be very difficult to change that.

  27. Permalink to comment#

    Weird. I could have sworn that less than a month ago I tried putting a style tag in the body of a page (which worked for most browsers), only to have Safari throw an error and move it into the head…?

  28. As Shut Pavel points out, you don’t have to jam style blocks into the body in order to make this work. Toss this in your head element and you can do the same thing. You can even make the visible styles go away and have to reload to get them back. (Awesome!)

    <style type="text/css" contenteditable>
    head, style {display: block;}
    style {font-family: monospace; white-space: pre;}
    
    body {background: green;}
    </style>

    Of course, you can get fancier with this and make it so the “show styles” CSS is in another, not-editable style element, but this serves as a decent proof of concept.

  29. SalmanAbbas007
    Permalink to comment#

    haha Niiiicce, Bookmarked :D

  30. Monkey
    Permalink to comment#

    Just a though on the possibilities of bad use:

    If you coded the style tag without any properties or content and didn’t make it content editable but did make it display block and made it look all fancy for design purposes… is that a bad use of the style tag? Are we getting into the realm of misuse of a tag if we use the style tag to “STYLE” the page with fancy decorative design?

    I see potentials here but don’t know the ramifications both positive and negative especially when pertaining to standards and accessibility ;)

    Again just a thought…

  31. Just came accross this , its really cool thanks I will be using it.

  32. Awesome trick ..

  33. Permalink to comment#

    holy crap, that was awesome

  34. so cool, thanks for the tip!

    brent
    @
    mimoYmima.com

  35. Tanzania
    Permalink to comment#

    Thank you, author! Very useful article, it always was a problem for me to investigate all these tags, links, notes … To Bronislav Klucka: respect and gratefulness for his informative posts. I`ll use these recommendations in my work. And from blogger to bloggers: may be this link Greatiful can help my numerous colleges – bloggers to earn through blogging) Its easy to registrate, confirm your RSS channel, then sometimes enter and take your money. Enjoy!

  36. Nice trick!

    It seems editing/adding rules works best when the style block is in the head though.

  37. Miles Carmany
    Permalink to comment#

    This would be awesome for demo/tutorial pages.

    Say you want to explain how css gradients work, you could set up a demo page using this trick, and the viewers can easily change the colors, direction, stops, etc.

    And since its non-destructive editing, they just hit refresh and its back to the original demo.

  38. @Miles – This is exactly why I did on css-101.org, you can see an example here (check the orange box).

    As a side note, I noticed that webkit allows to use the enter/return key to create new lines, but then fails to apply the changes. So I believe the best is to use shift+return in all browsers.

    Thanks to Chris for the inspiration.

  39. its really work, cool trick

  40. redsonic
    Permalink to comment#

    awesome, funny :)

  41. The same goes for other hidden elements like head, script, meta et cetera. I wrote about this before: Displaying hidden elements like head using CSS.

  42. Don’t shoot yourself in the foot with “display:none;” =)

  43. Neat. Really neat. Valuable? Maybe. Functional? Not really. If no extensions already existed in browsers that allow us to edit the content live for testing, then this would be great. I can see using it in IE so I can edit it directly. But past development I can’t think of an immediate use for it. I haven’t exactly been waiting something like this and I can’t think of any problems it’s going to solve. And validity. Oh man, validity.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".