Fonts

Font Size  
<font size="1">Size</font> Size 1
<font size="2">Size</font> Size 2
<font size="3">Size</font> Size 3
<font size="4">Size</font> Size 4
<font size="5">Size</font> Size 5
<font size="6">Size</font> Size 6
<font size="7">Size</font> Size 7
   
Headings  
<h1>Size 1</h1>

Size 1
<h1>Size 2</h1>

Size 2
<h1>Size 3</h1>

Size 3
<h1>Size 4</h1>

Size 4
<h1>Size 5</h1>
Size 5
<h1>Size 6</h1>
Size 6
   
Font Face  
<font face="Comic Sans MS">Text</font> Text
<font face="Arial">Text</font> Text
<font face="Tahoma">Text</font> Text
<font face="Lucida Handwriting">Text</font> Text
<font face="Book Antiqua">Text</font> Text
   
Tip - When using fonts, it is a good idea to stick to system fonts, because everyone has them installed on their computer. When you start using non system fonts, you can't control how your webpage will look on other people's computers
   
Font Colour  
<font color="#0000FF">Text</font> Text
<font color="#FFFF00">Text</font> Text
<font color="#00FF00">Text</font> Text
<font color="#FF00FF">Text</font> Text
   
Font Face, Colour & Size  
<font color="0000FF" size="4" font="Arial">Text</font> Text
   
Formatting  
<b>Bold</b> Bold
<i>Italic</i> Italic
<u>Underline</u> Underline
<b><i><u>All of them</u></i></b> All
<big>Big</big> Big
<small>Small<small> Small
<strike>Strike</strike> Strike
<span style="text-decoration: overline">Overline</span> Overline
<blink>Blink</blink> Blink
<sup>Superscript</sup> Superscript
<sub>Subscript</sub> Subscript
<span style="font-variant: small-caps">Small Caps</span> Small Caps
<span style="text-transform: uppercase">All caps</span> All Caps
<span style="text-transform: capitalize">Capitalise</span> Capitalise
<span style="visibility: hidden">Hidden</span> ( Hidden ) - there really is something there
<strong>Strong</strong> Strong
<em>Emphasis</em> Emphasis
<samp>Sample</samp> Sample
<dfn>Definition</dfn> Definition
<cite>Citation</cite> Citation
<var>Variable</var> Variable
<kbd>Keyboard</kbd> Keyboard
<code>Code</code> Code
   
Tip - When writing html code, make sure everything is spelt the American way
   
Lists  
   
Bullet List  
<ul>
<li>Text
<li>Text
</ul>
  • Text
  • Text
Ordered List  
<ol>
<li>Text
<li>Text
</ol>
  1. Text
  2. Text
Definition List  
<dl>
<dt>Text
<dd>Text
<dt>Text
<dd>Text
</dl>
Text
Text
Text
Text
   
Bullet Shapes  
<ul type="circle">
<li>Text
<li>Text
</ul>
  • Text
  • Text
<ul type="square">
<li>Text
<li>Text
</ul>
  • Text
  • Text
<ul type="disc">
<li>Text
<li>Text
</ul>
  • Text
  • Text
   
Using an Image  
<ul imagesrc="bullet.jpg">
<li>Text</li>
<li>Text</li>
</ul>
bullet

Text
bullet

Text
   
Roman Numerals  
<ol type="I">
<li>Text</li>
<li>Text</li>
</ol>
  1. Text
  2. Text
<ol type="i">
<li>Text</li>
<li>Text</li>
</ol>
  1. Text
  2. Text
Alphabetic  
<ol type="A">
<li>Text</li>
<li>Text</li>
</ol>
  1. Text
  2. Text
<ol type="a">
<li>Text</li>
<li>Text</li>
</ol>
  1. Text
  2. Text
   
Start At  
<ol start="10">
<li>Text</li>
<li>Text</li>
</ol>
  1. Text
  2. Text
   
Spacing  
<br>Text
<br>Text		 Text
Text
<p>Text</p>
<p>Text</p>		 Text

Text
   
Aligning  
<p align="left">Text</p>
<p align="center">Text</p>
<p align="right">Text</p>
<p align="justify">Text</p>

Text

Text

Text

Text
Colouring a list  
<ul style="color: 'blue'">
<li><span style="color: 'navy'">Line 1</span>
<li><span style="color: 'navy'">Line 2</span>
<li><span style="color: 'navy'">Line 3</span>
</ul>
  • Line 1
  • Line 2
  • Line 3
   
   
Tip - Justify is best used when there is a lot of text
   
Horizontal Lines  
<hr>
<hr width="20%">
<hr width="60%">
<hr width="60%" color="#0000FF">
<hr width="60%" color="#0000FF" size="4">
<hr width="60%"color="0000FF" size="6" align="center">
   
Tip - default size of a horizontal line is 100% of the available space size
   
Width - can be anything from 1% - 100%
Size - can be anything from 1 - 10000 pixels high
Align - can be left, right or center		  
   

top of page
 

Last Updated
Tuesday, 17 April 2007