0

I'm making a tutorial website. Some HTML, CSS, and JS is presented and then in a box its result is shown - basically what Codepen does. I've been just storing a separate doc in a demo directory and then using an iframe on the tutorial page; is there any way to do this inline? Something like:

<style>
    p{color: red;}
</style>
<demo>
    <p>text</p>
</demo>

and have the paragraph render inline, ignoring the color: red that was specified in the parent page CSS. It's just cumbersome editing a separate file and using iframe and I guess Codepen is a little more convenient but it's an extra thing to embed. I would appreciate any help.

wwsalmon
  • 156
  • 13
  • https://stackoverflow.com/questions/2820453/display-html-code-in-html – Asons Sep 22 '18 at 20:33
  • 1
    Ignored, no. Overridden, yes. CSS applies to all elements matching the selector. If you don't want it to apply to something, make the selector not match. – tao Sep 22 '18 at 20:33
  • @LGSon, he doesnt's want to display the source, he wants to render the snippet without applying page's CSS. – tao Sep 22 '18 at 20:37
  • @AndreiGheorghiu Wasn't sure what was wanted so decided to make it a comment only and not closing it. – Asons Sep 22 '18 at 20:42
  • @AndreiGheorghiu The `all: initial` might be a solution to allow for _scoped_ CSS ... https://jsfiddle.net/Lq74mpda/ – Asons Sep 22 '18 at 20:50
  • @LGSon and that would work in IE... how? – tao Sep 22 '18 at 20:58
  • 1
    @AndreiGheorghiu It doesn't...and that is why I don't post an answer – Asons Sep 22 '18 at 21:02
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/180590/discussion-between-andrei-gheorghiu-and-lgson). – tao Sep 22 '18 at 21:09
  • @AndreiGheorghiu Btw, your first comment could be a proper answer...maybe with `` .... as when(if) one can use `all: initial` cross browser, it as well rather _override_ than _scope_ the CSS. – Asons Sep 22 '18 at 21:31
  • 1
    @LGSon I think that just might work, I'll just have to be careful no styling in the demo block effects code outside of it. Thanks for all the help everyone. – wwsalmon Sep 23 '18 at 21:06

0 Answers0