Embedded CSS Style
An embedded style sheet should be used when a single page or document has a unique style. If the same style sheet is used for multiple pages or documents, then an external style sheet would be more appropriate.
A style sheet may be embedded in a document with the style element. The style element is placed in the document head.
<style type="text/css" media="screen">body {background-color:red; color:white;} p {background-color:yellow; color:black;} .text {padding:3px; margin:10px 0 0;font-size:1.2em;}</style>
The required type attribute is used to specify a media type, as is its function with the link element. Similarly, title and media attributes may also be specified.
Some older browsers are unaware of the style element and will show this as if they were part of the body making the style element visible to the user. To prevent this, the contents of the style element should be contained within a cdata comment tag.
<style type="text/css" media="screen">/*<![CDATA[*/ body {background-color:red; color:white;} p {background-color:yellow; color:black;} .text {padding:3px; margin:10px 0 0;font-size:1.2em;} /*]]>*/</style>
This use of cdata comment tag hides the style from older browsers and should be used only in HTML. In XHTML, the cdata comment tag would be a real XML comment, and the style will be hidden from browsers that treat the document as XML.