[Cascading Style Sheets]
[Previous page] [Next page] [Section contents page]

Implementing Styles

Styles can be inserted into documents in several different ways:

  1. by linking a separate style sheet file to one or more web pages

    This is the method I recommend, as it allows you to use a single style sheet for many pages, perhaps even your whole site, which is most efficient. (This may not work if you tend to vary the formatting for each page considerably, but that's generally not a good idea in terms of communicating effectively.) It also separates the style specifications from the page contents entirely, which eliminates any chance of non-CSS-aware browsers mistaking the style information for page contents.

    In this case, you define the styles in a separate file with the extension .css and reference it with a link tag that goes inside the head of each HTML file that uses it:

    Example

    <html>
    <head>
    <link rel=STYLESHEET href="../styles/stylesheets.css" type="text/css">
    <title>...</title>
    </head>
    <body>...

    Notice the "type=text/css" attribute, also used in the <style> tag below, to identify this as a cascading style sheet. (The latest version of Internet Explorer doesn't require this, but it's safest to put it in, as other browsers may when they add support for style sheets.)

  2. by embedding a style sheet in a single web page

    In this case, you define the styles within a style tag that is placed between the <html> tag and the <body> tag:

    Example

    <html>

    <style type="text/css">
    <!--
    P { font-size: 10pt; font-family: "Verdana, Arial, Sans-Serif"; color: #000066 }
    H1 { font-size: 16pt; font-family: "Impact, Arial, Sans-Serif"; color: #990000 }
    -->
    </style>

    <head>...</head>
    <body>...

    Note that the actual style specifications (which I'll explain in following pages) are embedded inside a comment tag -- this is to ensure that browsers not supporting CSS don't interpret these lines as content to be displayed.

  3. by adding inline style attributes to such tags as <p>, <div>, or <span>

    In this case you specify a style for a single block of text, or use the <span> tag to specify the style for a word or phrase:

    Example

    <div style="margin-left: 0.5in; font-size: 10pt">
    This would be an indented block with some
    <span style="font-weight: bold; background: #FFFF00">highlighted text</span>
    in it
    </div>

[Previous page] [Next page] [Section contents page]