Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

EPA Web Design Specification

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.

Note to Coders

You do not need to download a copy of the master style sheets or JavaScript files.

  • Do not edit the link to the master style sheets or JavaScript files. Do not download local copies.
  • Advantage: As new styles become available or EPA makes a look and feel change, no additional work is required for individual sites.

If you use local copies for development.

  • Do not modify the style sheets in any way.
  • You are responsible for maintaining current copies. Check for updates frequently.

This specification provides a high-level overview of the template. More detailed information is available.

This specification and the associated template and style sheets apply to all HTML pages on EPA's Web site and all pages that the browser interprets as HTML (e.g., Oracle, Cold Fusion, Domino, etc.).

Our organizing principle is to divide EPA's single site into many "areas." An area covers some cohesive topic or set of materials. It is defined visually by a set of sidebar links and an area name. Each page within an area will use the same set of sidebar links as the means of navigating among those parts. Each area will use a template developed from the master template. Local templates vary from the master template according to this specification.

The template includes an XHTML file, cascading style sheets, and JavaScript files. The template contains specific XHTML code to render pages using the standard EPA look and feel (see Writing in XHTML 1.0 Strict). The master style sheet sets the layout, the appearance of text and links, and default boxes, lists, links, etc. The master JavaScript sets the date last modified, the search box autosuggest feature, EPA's jquery framework, etc.

Rules in local style sheets cannot override any rules in the master style sheets.

Top of Page

image of page layout

Showing the four main areas in EPA Template 4

Standard EPA Web Design Layout

Each HTML page has a standard layout, with four primary sections:

  1. Header: the CSS specifies exactly how everything in this section appears. The code, text, and link destination (if necessary) for the area name, search engine code, Contact Us and Recent Addition links, and breadcrumbs are set locally.
  2. Content: the "white space". The CSS specifies fonts and text appearance, and includes examples of boxes, lists, and images with captions, which you can use. The area footer text is set locally.
  3. Area-navigation: the left-hand sidebar links. The CSS specifies fonts and appearance. The actual wording of link text and destinations are set locally.
  4. Footer: The template specifies the appearance and the link text. The Contact Us link destination is set locally.

Instructions for editing the template are available.

Top of Page

Header <div id="header">

The header contains the EPA logo, the top right EPA name (image), the area name, a Contact Us link, and the breadcrumbs.

You must modify:

Notes: In Template 4, the Recent Additions link is in the sidebar. The Print Version link has been removed. Breadcrumbs are no longer separated with &gt; (">").

The header style is part of the EPA look and feel. If you use a local style sheet, do not modify any of the styles associated with the header in your local style sheet or with inline style declarations.

Top of Page

Content <div id="content">

The content is everything from the page title to the area footer (inclusive), just before the blue separator line. The page title (the<h1> header) is required, except on area home pages.

You must modify:

  • All content, including forms, images, etc.
  • Area footer text
  • If a site uses an area footer, it goes into the template and is used across the entire web area.
  • Validate code for XHTML 1.0 strict
  • Directions to update existing pages to Template 4

The master style sheet includes basic styles for the content portion of your pages. You can use additional styles in a local style sheet, but you must not edit the rule governing the layout and positioning of the "content box" nor the area footer in the template. These are components of the EPA look and feel.

Available Styles in the EPA Master Style Sheet

The EPA look and feel is driven by the master style sheet. If local styles are restricted to the content, EPA will be able to revise the site-wide look and feel by simply editing the master style sheet, with no additional work on your part.

EPA's JQuery Framework for the content <div>

The master JavaScript includes jQuery, a framework for adding interactive content to your pages. Instead of developing your own, plugins available from epafiles.

Top of Page

Left sidebar (Area Navigation) <div id="area-nav">

The left sidebar contains the sidebar links for an area.

You must modify:

  • Link text
  • Link destination

The area navigation style is part of the EPA look and feel. If you use a local style sheet, do not modify any of the styles associated with the area navigation in your local style sheet or with inline style declarations.

Use the Area Navigation (sidebar) requirements:

  • [Subject] Home
  • Basic Information
  • Where You Live (optional)
  • Recent Additions (optional)

Top of Page

Footer <div id="footer">

The footer contains EPA's global footer links, primary JavaScript files, and information about the page (Last Updated and the URL).

You must modify:

  • Contact Us link
    • The destination of the Contact Us link in the footer must match the destination of the Contact Us link in the header.

The footer style is part of the EPA look and feel. If you use a local style sheet, do not modify any of the styles associated with the footer in your local style sheet or with inline style declarations.

More on the footers.

Top of Page

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

Jump to main content.