A A A A A

Text Styling Example

Inaccessible use of font element

HTML Example

Example Heading

This is a sample paragraph to demonstrate the inaccessible use of the font element.

HTML Source Code

<p style="margin-top: 1em"><font size="6" color="#0000ff" face="fantasy">Example Heading</font></p>

<p>This is a sample paragraph to demonstrate the <font size="4" color="#999999" face="monospace"><b><u>inaccessible</u></b></font> use of the <code>font</code> element.</p>

Accessible use of CSS, h3 and strong elements instead of font element

HTML Example

Example Heading

This is a sample paragraph to demonstrate the accessible use of the h3 and strong elements and styling them with CSS.

HTML Source Code

<div class="example">

  <h3>Example Heading</h3>

  <p>This is a sample paragraph to demonstrate the <strong>accessible</strong> use of the <code>h3</code> and <code>strong</code> elements and styling them with CSS.</p>

</div>

CSS Source Code

/* CSS Document */

#content div.example h3
{
  font-size: xx-large;
  color: #0000ff;
  font-family: fantasy;
}

#content div.example strong
{
  font-size: large;
  color: #999999;
  font-family: monospace;
  text-decoration: underline;
  font-weight: bold;
}

Styling Best Practices

Other Best Practices

Working Group