Internal USGS Access Only

Cascading Style Sheets, Boxes

Two useful style sheet features which are supported even in Netscape 4.x and IE 5.x include background colors and boxes.

Setting Background Colors

  .highlight { background: rgb(100%,100%,80%); }
  .danger    { color: yellow; background: black; font-weight: bold; }

<p>An example of <span class="highlight">highlighting gently</span>,
and highlighting with<span class="danger"> special emphasis </span>.</p>

An example of highlighting gently, and highlighting with special emphasis .

Note that you can specify colors in a variety of ways, including rgb values, rgb percentages, and using color names.

Creating Boxes

  .box { border-color: olive;
         background: rgb(255,225,235);
         border-width: medium;
         border-style: double;
         margin-left: 8em;
         margin-right: 8em;
         padding: 1.0em; }

<div class="box">
  <p>A box containing text</p>
  <p>for two paragraphs.</p>
</div>
    

A DIV tag with a class can be used to apply a style across any number of other HTML tags.

Note: Class names must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). Older browsers do not support underscores or colons. Do not use spaces in class names. Class names are supposed to be case sensitive, but older versions of Netscape and Internet Explorer ignore case.

Remember: It is much more user-friendly to specify font sizes and spacing with units that scale such as em, rather than in fixed sizes such as pt (points). This lets the user use whatever size font suits them, and then everything on the page will scale to match.

slide 24

"Mastering a Web Site" online course Created and maintained by Lorna Schmid and David Boldt. http://water.usgs.gov/usgs/training/webmaster/css_boxes.html     Last modified: Mon Oct 20 09:03:05 EDT 2003