Jump to main content or area navigation.

Contact Us

EPA Design, V4

Text Samples, Template 4

Text Links of Note

Note: These styles apply to Template 4 pages. Here's a page showing how text looks in Template 3.

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 these pages, contact the Web Template Workgroup.

Jump to main content.