Text Styling Example: color Element

Inaccessible use of color element

Example Start

Example Heading

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

HTML Source Code


<p style="margin-top: 1em"> <font color="#0000ff" size="6" face="sans-serif"> 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>color</code> element. </p>

Accessible use of CSS and color property instead of color element

Example Start

Example Heading

This is an example paragraph to demonstrate replacing the color element with accessible CSS styling using the color property.

HTML Source Code


<div class="example">

<h3> Example Heading </h3>

<p> This is an example paragraph to demonstrate replacing the <code>color</code> element with <strong>accessible</strong> CSS styling using the <code>color</code> property. </p>

</div>

CSS Code


/* CSS Document */

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

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