Skip to content | Change text size
 

Applying styles to content

These styles will work in a slightly different way across browsers. Many of them will not work in Netscape 4 and older browsers. Where you need to add an HTML attribute to an element to get the desired effect in Netscape 4 and older browsers, an example will be provided.

General text styles

Appearance Markup to achieve this

A paragraph

 <p>A paragraph</p>
alt="code example" <code>alt="code example"</code>
Text caption for an image.
 <div class="caption">Text caption for an image.</div>
  • Unordered list
  • Unordered list
  • Unordered list
 <ul>
<li>Unordered list</li>
<li>Unordered list</li>
<li>Unordered list</li>
</ul>
  1. Ordered list
  2. Ordered list
  3. Ordered list
 <ol>
<li>Ordered list</li>
<li>Ordered list</li>
<li>Ordered list</li>
</ol>
  • Unordered list without bullet
  • Unordered list without bullet
  • Unordered list without bullet
 <ul class="nobullet">
<li>Unordered list without bullet</li>
<li>Unordered list without bullet</li>
<li>Unordered list without bullet</li>
</ul>
Definition List
A list of terms that are defined
 <dl>
<dt>Definition List</dt>
<dd>A list of terms that are defined</dd>
</dl>
Indented text
 <div class="indent1">Indented text</div>
Text indented more
 <div class="indent2">Text indented more</div>
Text width of 50% of available space (does not work in Netscape 4 and older browsers)
 <div class="text50">Text width of 50% of available space</div>
Text width of 60% of available space (does not work in Netscape 4 and older browsers)
 <div class="text60">Text width of 60% of available space</div>
Text width of 70% of available space (does not work in Netscape 4 and older browsers)
 <div class="text70">Text width of 70% of available space</div>
Text width of 80% of available space (does not work in Netscape 4 and older browsers)
<div class="text80">Text width of 80% of available space</div>
Text width of 90% of available space (does not work in Netscape 4 and older browsers)
<div class="text90">Text width of 90% of available space</div>

Heading styles

Appearance Markup to achieve this

Heading level 1

 <h1>Heading level 1</h1>

Heading level 2

 <h2>Heading level 2</h2>

Heading level 2 - black

 <h2 class="black">Heading level 2 - black</h2>

Heading level 3

 <h3>Heading level 3</h3>

Heading level 3 - black

 <h3 class="black">Heading level 3 - black</h3>

Heading level 4

 <h4>Heading level 4</h4>

Heading level 4 - black

 <h4 class="black">Heading level 4 - black</h4>
Heading level 5
 <h5>Heading level 5</h5>
Heading level 6
 <h6>Heading level 6</h6>

Image styles

These styles will not work on browsers older than version 4. Netscape 4 requires the inclusion of the <border> attributes on the img element to display a border.

Appearance Markup to achieve this


Image with no border

 <img src="/assets/images/img.jpg" width="38" height="31" class="noborder" alt=" " title="" />


Image with 1 pixel border

Note: Netscape 4 requires border="1" to display border

 <img src="/assets/images/img.jpg" width="38" height="31" border="1" class="border" alt=" " title="" />


Image with 2 pixel border

Note:Netscape 4 requires border="2" to display border

 <img src="/assets/images/img.jpg" width="38" height="31" border="2" class="border2" alt=" " title="" />

Highlight styles

Appearance Markup to achieve this
Text chunk highlight
 <div class="box">Text chunk highlight</div>
Text shade style
<div class="shade">Text shade style</div>


Screenshot (as used in various places throughout the style guide).

Note: Netscape 4 and older browsers will not display this style.

 <img src="/assets/images/img.jpg" width="38" height="31" class="screenshot" alt="Screenshot showing ... " />

Data table styles

Note: Table header colour will vary for faculties and sub-brands.

Appearance Markup to achieve this
A data table
Table heading Table heading
Table heading data data
Table heading data data
<table width="90%" border="1" cellspacing="0" cellpadding="5" summary="Summary of table content.">
<caption>A data table</caption>
<tr>
<td></td>
<th scope="col">Table heading</th>
<th scope="col">Table heading</th>
</tr>
<tr>
<th scope="row">Table heading</th>
<td>data</td>
<td>data</td>
</tr>
<tr>
<th scope="row">Table heading</th>
<td>data</td>
<td>data</td>
</tr>
</table>
A data table with smaller text
Table heading Table heading
Table heading data data
Table heading data data
<table width="90%" border="1" cellspacing="0" cellpadding="5" class="info-table" summary="Summary of table content.">
<caption>A data table with smaller text</caption>
<tr>
<td></td>
<th scope="col">Table heading</th>
<th scope="col">Table heading</th>
</tr>
<tr>
<th scope="row">Table heading</th>
<td>data</td>
<td>data</td>
</tr>
<tr>
<th scope="row">Table heading</th>
<td>data</td>
<td>data</td>
</tr>
</table>

Using two styles

It is possible to apply two styles to a single element.

Appearance Markup to achieve this

A black indented heading

 <h3 class="black indent1">A black indented heading</h3>

A black heading indented more

 <h3 class="black indent2">A black indented heading</h3>

Requesting additional styles

If you would like to request that a new style be added to the central style sheet, please email webmaster@monash.edu.au.