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.
Text Links of Note
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.
- Use strong:
- Emphasized text
- Use em:
<em>emphasized text</em>
. This tag, likestrong
, 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.
- Use em:
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.
Styled Text
These styles require application of a class to the HTML element. Code example:
<p class="something goes here">styled text</em>
- Warning or emergency text
<p class="warning">warning or emergency text</p>
- Highlighted text
<p class="highlight">highlighted text</p>
<span class="highlight">highlighted text</span>
- Top of page links
- Small bold text (Arial)
<p class="epaltsansbold">This text is epaltsansbold (in Arial).</p>
- epaLtSans (Arial)
<p class="epaltsans">This text is epaltsans (use either epaltsans or epaLtSans) in Arial.</p>
- Image captions (note the slight padding)
- "Centered" text
<p class="center">This text is centered.</p>
- Right-aligned text (Be careful when using this class.)
<p class="right">This text is floated right.</p>
- 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.