Internal USGS Access Only

Cascading Style Sheets - Associating with Documents

There are three ways to associate style with a document.

1 — Inline

Inline style is applied using the style attribute.

<p style="text-align:center">a centered paragraph</p>

2 — Embedded

Embedded style information is specified in the HEAD section of an html document.

<head>
  <title>The Title</title>
  <style type="text/css">
     H1 { color: blue;  text-align: center; }
     P { text-indent: 3em; }
  </style>
</head>

Note: The TYPE attribute of the STYLE element tells a browser what kind of style mechanism to use, CSS is currently the only widely supported style type.

3 — External (Imported or Linked)

External style information is also specified in the HEAD section of an html document.

<head>
  <title>The Title</title>
  <link rel="stylesheet"   href="http://style.com/fancy.css">
  <link rel="stylesheet"   href="local.css">
</head>

A cascading style sheet can be imported from your own server or from another web server.

It is also possible to import style sheets within a STYLE section of the heading

<head>
   <style type="text/css">
      @import url(http://style.com/fancy.css);
   </style>
</head>

Netscape 4.x does not recognize the @import method of importing. Since Netscape 4.x implements so many style options badly, this can be an effective way of hiding stylesheet information from that browser.

All Style Forms

The style commands are exactly the same, regardless of where they are specified

Style sheets are most powerful when they are consolidated into a file that is imported by web pages. This allows you to make changes to many web pages by changing just one file.

slide 18

"Mastering a Web Site" online course
Created and maintained by Lorna Schmid and David Boldt.
http://water.usgs.gov/usgs/training/webmaster/css_associating.html
Last modified: Wed Nov 12 17:22:06 EST 2003