Internal USGS Access Only

Cascading Style Sheets - Mixing Style Sources

The example below uses all three methods in a single document.

<head>
  <title>The Title</title>
  <link rel="stylesheet"   href="http://style.com/fancy.css">
  <style type="text/css">
  <!--
     /* Comments look like this */

     @import url(local.css);
     H1 { color: blue;  text-align: center; }
     P { text-indent: 3em; }
  -->
  </style>
</head>
<body>
   <p style="text-align:center">a centered paragraph</p>
</body>

CSS comments are in the same style as those used in C programs, /* comment */, very different from html.

Imported styles must be specified before Embedded. Later specifications override earlier ones.

The inline style specifications are the most specific, and they will override anything that is imported or embedded.

Hide Style References From Old Browsers

To hide style references from older browsers that don't understand style sheets, comment the contents of the STYLE tag:

    <style type="text/css">
    <!--
      H2 { color: blue }
    -->
    </style>

CSS Units

The units above for a text indent are "em"s. These are proportional to the size of the font. An "em" is the distance from the top of capital letters to the bottom of letters which descend beneath the baseline, ie."g".

Unit	Description
%	a percentage of something
in	inch
cm	centimeter
mm	millimeter
em	one em is equal to the font size of the current element
ex	one ex is the x-height of a font, the x-height is usually about half the font-size
pt	point (1 pt is the same as 1/72 inch)
pc	pica (1 pc is the same as 12 points)
px	pixels (a dot on the computer screen)

Proportional units, %, em, and ex are highlighted.

Avoid non-proportional units whenever possible to allow users to resize the content of your web pages.

slide 19

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