Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

Styling your Content with CSS

Note: EPA no longer updates this information, but it may be useful as a reference or resource.

EPA builds all web content in the Drupal WebCMS as of January 2013. All new microsites and resource directories will be created using Drupal WebCMS. There is still content on EPA's legacy servers and this content will be maintained there until it is transformed and moved into the Drupal WebCMS. This information on styles and look and feel only applies to the existing content using Template 4 or older versions of EPA's template. Information for building new content is found in the EPA Web Guide.

OneEPA Web

These styles are only used on content that remains in the legacy system. Any new site being built has to be built as part of One EPA Web in the Drupal WebCMS. An updated web guide will be available to provide information on requesting new web areas and how to build content in the Drupal WebCMS.

Note: EPA no longer updates this information, but it may be useful as a reference or resource.

There are a variety of styles available for your use in the master style sheet. These styles aim to make your life easier: they are easy to implement and give your pages a little bit of visual interest.

In general, if the page is in Template 4, like this one, then its instructions have been updated (if needed).

Available Styles

These styles are replicated in a MS-Word document, for printing: Styling your content using the master style sheet (MS-Word) (21 pp., 344 K). (This same styling document is available for Template 3 as well (MS-Word) (20 pp., 204 K).

Optional

We offer some simple column layouts. Many more layouts are possible, as long as you confine your columns to the "white space".

Top of Page

Style Sheet Version History

The master style sheet contains many useful styles. You should not need to create styles very often, if ever. If you have a style you think should be included in the master style sheet so everyone can use it, please contact us.

Do not download local copies of the style sheets. If you require local copies for development, you will be responsible for:

  • not modifying the style sheets in any way, and
  • maintaining current copies.

Rules in local style sheets, if you create them, cannot override any rules in the master style sheets.

Version History

Version history, release dates, and modifcations for EPA's master style sheets
Version Release Date Modification since prior release
One EPA November 2010 Major overhaul to CSS file that resulted in significant changes to the layout (including the drop-down menus), but not to the styles available for your content.
4.1.2 02/23/10 Minor changes.
4.1.1 09/30/09 Minor changes.
4.1.0 07/15/09 Initial Release

Note that the HTML to create the EPA design elements (above) has not changed, even if the way they look has.

There are six style sheets:

  1. master (epa-core.css)
  2. hacks for Internet Explorer (using conditional comments)
    • Version 6 and under (ie6.css)
    • Version 7 (ie7.css)
    • Version 8 (ie8.css)
  3. For pages that use special jQuery effects
    • Thickbox (jquery.thickbox.css)
3.1.2 06/05/07

The following styles were added:

The following styles were modified:

  • Images inside a link (a img; such as image maps0 no longer get a border.
  • Typographical changes, including spacing around headings.
3.1 11/15/06

The following styles were added:

The following styles were modified:

  • Area navigation (sidebar) horizontal rule (<hr />'s inside the first list item [area home link] is centered, fixes validation problem)
  • Various styles, especially in the print style sheet (to ensure consistency across browsers)
3.0 05/30/06 Initial Release
The style sheets are well-documented.

There are five style sheets:

  1. master (epa.css)
  2. The master style sheets links to epa-content.css
  3. hacks for Internet Explorer, version 6 and under (ie.css)
  4. (For AA/RA or Topic home pages only [aara.css])
  5. print version (print.css)
2.2 05/30/02

NOTE VERSION 2.2 SUPERCEDES ALL PREVIOUS VERSIONS

The following styles were added:

  • PRE (sets the font-family to font-family: Courier New, Courier, monospace;)

The following styles were modified:

  • CODE (sets the font-family to font-family: Courier New, Courier, monospace;)
2.1 03/13/02

NOTE VERSION 2.1 SUPERCEDES ALL PREVIOUS VERSIONS

This history only reflects the changes between v2.0 and v2.1.

The following styles were added:

  • The 1st line that declares Arial as the font-family for the following tags: H1, H2, h2, H4, H5, H6, P, td, th, blockquote, ol, ul, dl, dt, dd, li
  • The 2nd-8th lines that declared the font-size for the following tags: P, td, th, blockquote, ol, ul, dl, dt, dd, li
  • The following custom style was added: .epaPageName (declares the font-size and color)
  • The following custom style was added: .epaBodyText (declares the font-family and font-size)

The following styles were modified:

  • The style .raStates was edited to change the font-size to font-size: 8pt;
  • The styles A.epaSideBarLinks and epaStates were edited to change the font-size to font-size: 9pt;
  • The style .epaLtSans was edited to change the font-size to font-size: 8pt;
  • The style .epaAreaName was edited to change the font-size to font-size: 18pt;
  • The style TD#epaSideBar DIV was edited to change the padding-bottom to padding-bottom: 6pt;
  • The styles .epaGlobalLinks, .epaBreadLinks, .epaFooterText, .raStates were edited to change the font-size to font-size: 8pt;
2.0 03/05/02

Several changes have been made to the style sheet:

The following styles were deleted:

  • The 1st line that declared Arial as the font-family for the following tags: H1, H2, h2, H4, H5, H6, P, td, th, blockquote, li
  • The 2nd-8th lines that declared the font-size for the following tags: P, td, th, blockquote, li, H1, H2, h2, H4, H5, H6
  • The 9th line that declared the color for all visited links
  • The following custom styles were deleted: .epaPageHeaders, .epaPageHeaders2, .epaSubHead, .epaSubHeadBig, epaBodyText

The following styles were modified:

  • The selector A was added to the style declarations for the sidebar. Styles are now A.epaSideBarLinks, A.epaSideBarLinks:visited, A.epaSideBarLinks:hover
  • The style .raStates was edited to change the font-family to: font-family: Verdana, Arial, Helvetica, sans-serif; and the font-size to font-size: 0.655em;
  • The style A.epaSideBarLinks was edited to change the font-size to font-size: 0.7em;
  • The style .epaLtSans was edited to change the font-size to font-size: 0.655em;
  • The style .epaAreaName was edited to change the font-size to font-size: 1.44em;

The following styles were added:

  • A.epaSideBarLinks:link (sets the link color of the sidebar links to white)
  • TD#epaSideBar DIV (note the spacing of the syntax for this style). This style controls the appearance of any DIV tag within a TD that has the id of epaSideBar.
  • CODE (sets the font-family to font-family: Courier, Courier New, mono;)
  • The style .epaGlobal was added to change the Search Form from a block to an inline element
  • The styles .epaGlobalLinks, .epaBreadLinks, .epaFooterText were added to format the Global Links, Breadcrumbs, and Footer Text
1.2 01/28/02 Added 2 new styles (.epaAARAAreaName and .raStates) for use by the AAship and RAship home pages. Also added some comments to the style sheet.
1.1 12/27/01 reversed the order that the .epaSideBarLinks:visited and .epaSideBarLinks:hover styles are listed in the style sheet
1.0 12/19/01 (initial release)

Top of Page

For help with your epa.gov web design, contact the Web Template Workgroup.

Jump to main content.