Printer-friendly page
Screen-friendly pageText Styling Example: color Element
Inaccessible use of color element
- Uses of the
fontelement to style text content - Uses of the
colorattribute and#0000ffvalue to style text content
HTML Example
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>
<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
- CSS styling and the
color:blue;declaration replaces thefontelements in the example. - CSS selectors used to style the
h3andstrongelements replace thefontelement.
HTML Example
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>
<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 Source 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;
}
#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;
}