Using Header Styles

Header styles also can be used to style the <p> element. The CSS rules can be placed in the head of the document using the style element. Like inline styles, header styles should be avoided where possible because the styles are added to the HTML markup rather than in external CSS files.

There are cases where header styles might be the preferred option in specific instances, such as a CSS rule that is specific to one page within a large website. Rather than add this rule to an overall CSS file, a header style may be used.

An example of a header style is shown in Listing 4.3. The type= "text/css" attribute must be specified within the style element in order for browsers to recognize the file type.

Listing 4.3. HTML Code Containing Header Styles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;
    charset=utf-8">
    <title>Lesson 4 - listing 2</title>
<style type="text/css" media="screen">
    p
    {
         font-family: arial, helvetica, sans-serif;
         margin: 1em;
         padding: 1em;
         background-color: gray;
         width: 10em;
    }
</style>
</head>
<body>
<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit...
</p>
</body>
</html>

Table of Contents