Embedding a style

Embedded style sheets allow you to change the appearance of tags in a single document. To embed a style sheet, you add a <style> tag at the top of your page in the <head> tag. The <style> tag contains any number of style definitions that you want to use.

The following example specifies styles for the <body>, <h1>, <h2>, and <p> tags:

This HTML…	Displays as…
<style type="text/css"> <!-- body {font: 10pt "Arial";} h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: blue}; h2 {font: 13pt/15pt "Arial"; font-weight: black; color: green} p {font: 10pt/12pt "Comic Sans MS"; color: black}; --> </style>

It is easy to maintain embedded style sheets. To change the colour of all paragraphs in the page, you change only one thing: the value associated with the color property in the style rule for <p>.

Note: If you use embedded styles, make sure that browsers that don't support style sheets don’t display your styles as text. To stop this happening, put your styles inside a comment:

<style>
<!--
h1 {font: 15pt/17pt "Arial"; font-weight: bold;}
-->
</style>

Use an embedded style sheet if you want to apply a unique style to a single page. If your page also has a linked style sheet, the styles you embed take precedence over the same styles in a linked style sheet.

For a list of properties, see the How to use style properties.