Using the <div> tag to set a style

If you want to change the appearance of a section on a page, you can use the <div> tag to define styles for that particular section.

The following example uses the <div> tag to change the colour and point size of a block of text. This has the same effect as assigning these styles separately for the <p>, <ul>, and <li> tags:

<div style="font-size: 10pt; color: red;">
<p>The style affects everything on this page 
until the div close tag.</p>
<ul>
<li>This is red and 10 pt.</li>
<li>so is this.</li>
</ul>
</div>

This looks like:

The following example uses the <div> tag for a block of text, but overrides it for a specific <li> tag:

<div style="font-size: 10pt; color: red;">
<p>The style specification affects everything on 
this page until the DIV close tag, except for the 
second list item.</p>
<ul>
<li>This is red and 10 pt.</li>
<li style="color: blue;">This is blue and 10 pt.</li>
</ul>
</div>

This looks like:

• Note: If you use the <div> tag to apply styles, browsers that don't support style sheets won't recognise the tags and any formatting you've applied will be lost.