CSS3 Sandbox

Cascading style sheets use three levels of HTML styling:

• Global level--Every HTML page references an external file that contains all the HTML style definitions; by convention this global CSS file is usually called style.css.
• Page level--You can specify the styling for each HTML page with style tags from anywhere within the page, though these styles are usually specified within the HEAD section. These styles override what's in the global style.css file.
• Inline--You can use a style="" tag within any HTML element to specify CSS for just that element. An inline style will override what's in the global style.css as well as any CSS specified with opening and closing style tags anywhere else in the file (though these are usually put in the HEAD section, as already mentioned, because they get parsed and stored for the page right away when the page first loads).

Importantly, because a media box is usally used for AI output, you need to specify the styling for the AI content separately. The styles aren't inherited from the HTML page where the media box "lives." I like to use very different styling for the AI HTML, usually via a page-level styling spec in the HEAD section, though you can also simply reference the global style.css file if you want the same styling that is used on the main HTML page. But it is recommended to give the AI its own styling, especially font, because you want the user to know when they are in "AI world" and when they aren't.