Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
This chapter is from the book

Internal Style Sheets and Inline Styles

In some situations, you might want to specify styles that will be used in only one web page, in which case you can enclose a style sheet between <style> and </style> tags and include it directly in an HTML document. Style sheets used in this manner must appear in the <head> of an HTML document. No <link /> tag is needed, and you cannot refer to that style sheet from any other page (unless you copy it into the beginning of that document, too). This kind of style sheet is known as an internal style sheet, as you learned earlier in the chapter.

Listing 3.3 shows an example of how you might specify an internal style sheet.

Listing 3.3 A Web Page with an Internal Style Sheet

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

  <head>

    <title>Some Page</title>


    <style type="text/css">

      div.footer {

        font-size: 9pt;

        line-height: 12pt;

        text-align: center;

      }

    </style>

  </head>

  <body>

  ...

  <div class="footer">

  Copyright 2009 Acme Products, Inc.

  </div>

  </body>

</html>

In the listing code, the div.footer style class is specified in an internal style sheet that appears in the head of the page. The style class is now available for use within the body of this page. And, in fact, it is used in the body of the page to style the copyright notice.

Internal style sheets are handy if you want to create a style rule that is used multiple times within a single page. However, in some instances you might need to apply a unique style to one particular element. This calls for an inline style rule, which allows you to specify a style for only a small part of a page, such as an individual element. For example, you can create and apply a style rule within a <p>, <div>, or <span> tag via the style attribute. This type of style is known as an inline style because it is specified right there in the middle of the HTML code.

Here’s how a sample style attribute might look:

<p style="color:green">

  This text is green, but <span style="color:red">this text is

  red.</span>

  Back to green again, but...

</p>

<p>

  ...now the green is over, and we're back to the default color

  for this page.

</p>
  • + Share This
  • 🔖 Save To Your Account