Link to USGS home page
Internal USGS Access Only

Cascading Style Sheets, Examples

Simple Example of CSS Use

The simplest form of a style specifier lists the type of tag, and curly brackets enclosing style instructions to use for that tag.

Styles for the whole document, everything enclosed by the BODY tag, are set using tag BODY.

  BODY { background: rgb(230,230,210); }
  H2 { color: green; }
  H1, H2, H3 { font-family: helvetica; }
  P {
    font-weight: bold;
    font-size: 1em;
    line-height: 1.2em;
    font-family: helvetica;
    font-style: normal;
  }
  H1 B { color: red; }

In HTML 4 all tags accept an optional CLASS attribute, and Style Sheets can control formatting by class. This is specified with a style for tag.class:

  <html>
    <head>
      <title> The Title </title>

      <style type="text/css">
        H1 { text-align: center }
        H1.froggy { color: #00FF00; }
      </style>

    </head>
    <body>
      <h1> Centered but not Green </h1>
      <h1 class="froggy"> Way too Green </h1>
    </body>
  </html>

One can make a generic class by omitting the element name:

  .boggy { color: olive }   /* all elements with CLASS boggy */

After which one could use class boggy for any element.

  <p class="boggy">text about bogs.</p>
  <blockquote class="boggy">A famous quote about bogs.</blockquote>

text about bogs.

A famous quote about bogs.

Note: Style sheet information is cached!

Only one class can be used per tag! To apply multiple styles, use DIV and/or SPAN.

slide 20

[up]
"Mastering a Web Site" online course
Created and maintained by Lorna Schmid and David Boldt.
http://water.usgs.gov/usgs/training/webmaster/css_examples.html    
Last modified: Wed Oct 15 17:54:54 EDT 2003