Head Data of an HTML Document

3.6 Writing Document-Wide CSS Styles Using <style>

You can use the style element to include style information (usually CSS) within the HTML document. Between <style> and </style>, you define how the web browser should display the HTML elements. Each HTML document can contain multiple style elements. Furthermore, since HTML 5, it’s valid to use this element within the HTML document body between <body> and </body>.

Referring to the HTML document /examples/chapter003/3_5/index.html from Section 3.5, instead of using the link element, you could use the style element to write the stylesheet information directly in the HTML document as follows:

<!doctype html>
<html lang="en">
  <head>
    <style type="text/css">

      p { 
        width:220px;
        padding:10px;
        border:5px solid blue;
        margin:0px;
        background-color:#e0ffff;
        text-align:center;
      }

 </style>
    <title>The style element in use</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>A simple paragraph text!</p>
  </body>
</html>

Listing 3.4 /examples/chapter003/3_6/index.html

As a result, you’ll obtain the same image as the one in Figure 3.5. Basically, in this example, only the code from the external CSS file style.css was embedded into the HTML document header within the style element. The p element is again formatted with CSS statements in the example. You don’t need to bother about these CSS statements between <style> and </style> at this stage, as I’ll describe CSS in detail later in this book.

Table 3.5 provides an overview of the HTML attributes for the style element.

Attribute	Meaning
`media`	Specifies for which medium/device the target resource in `href` has been optimized. This attribute is often used with stylesheets to define multiple styles for different media types.
`type`	Specifies the MIME type for the stylesheet (here, mostly with `text/css` for CSS file).

Table 3.5 Attributes for the <style> Element