Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

Text Samples, Template 4

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: These styles apply to Template 4 pages.


HTML

These styles are nothing more than basic HTML:

  • Normal text
    • Do nothing
  • Bold text
    • Use strong: <strong>strong text</strong>. This tag gives the word or phrase an extra emphasis when spoken by a screen reader.
    • Use b: <b>bold text</b> This tag merely emphasizes the text visually. There's no extra emphasis when spoken.
  • Emphasized text
    • Use em: <em>emphasized text</em>. This tag, like strong, gives the word or phrase an extra emphasis when spoken by a screen reader.
    • Use i: <i>italic text</b> This tag merely emphasizes the text visually. There's no extra emphasis when spoken.
  • code
    • <code>code</code>
  • If you use abbreviations or acronyms, they'll look like this: MIT:
    • <acronym title="Massachusetts Institute of Technology">MIT</acronym>
    • <abbr title="Massachusetts Institute of Technology">MIT</abbr>

More on basic HTML markup. See especially the section about inline text.

Top of Page


Styled Text

These styles require application of a class to the HTML element. Code example:

<p class="something goes here">styled text</em>

  1. Warning or emergency text

    <p class="warning">warning or emergency text</p>

  2. Highlighted text

    <p class="highlight">highlighted text</p>

    <span class="highlight">highlighted text</span>

  3. Top of page links
  4. Small bold text (Arial)

    <p class="epaltsansbold">This text is epaltsansbold (in Arial).</p>

  5. epaLtSans (Arial)

    <p class="epaltsans">This text is epaltsans (use either epaltsans or epaLtSans) in Arial.</p>

  6. Image captions (note the slight padding)

    <p class="caption">Image captions</p>

  7. "Centered" text

    <p class="center">This text is centered.</p>

  8. Right-aligned text (Be careful when using this class.)

    <p class="right">This text is floated right.</p>

  9. Left-aligned text (Be careful when using this class.)

    <p class="left">This text is floated left.</p>

    You can use "left" or "right" to float images, as well.

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

Jump to main content.