Embedded Style Sheets

Embedded Style Sheets refer to when you embed style sheet information into an HTML document using the STYLE element. You do this by embedding the style sheet information within <style>...</style> tags in the head of your document.

Example

Place the following code between the <head>...</head> tags of your HTML document:


<style type="text/css" media=screen>
<!--
   p {font-family: georgia, serif; font-size: x-small;}
   hr {color: #ff9900; height: 1px }
   a:hover {color: #ff0000; text-decoration: none}
-->
</style>

Now, whenever any of those elements are used within the body of the document, they will be formatted as instructed in the above style sheet.

HTML Editor

Try it yourself!

Embedded style sheets are suited for documents with unique design requirements. If the styles need to be applied across muliple documents, you should link to an external style sheet instead of using an embedded style sheet.

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/css/embedded_style_sheets.cfm">Embedded Style Sheets</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites