Using Embedded Style

Embedded style controls only the document in which it is embedded. As with inline style, this defeats the purpose of being able to apply styles site-wide. However, there are good uses for embedded style. One would be if that document is the only document in the site that takes those specific styles. Another is workflow related. I like to use embedded style while working on a design because it's all in the same document. This way, I don't have to switch between applications or windows to accomplish my tasks. Because the style rules are the same, I can simply cut out the final styles from the embedded sheet and link them, which you'll see how to do in just a bit.

Embedded style is added to the head portion of the document, within the style element, and it uses the required type attribute (see Example 7-1).

Example 7.1. An HTML document snippet describing embedded style
<title>working with style</title>
          <style type="text/css">
          body {background-color: black; color: white;}
          h1 {font-size: 24px;}
          p {font-size: 12px;}
<p>Paragraph one.</p>
<p>Paragraph two.</p>

Figure 7-3 shows the results.

Figure 7-3. Notice how the color from the body is inherited by all its children.