Free Simple HTML Tutorial

Controlling Text Appearance

First we will concentrate on bold, italic and underlined text. Of course these can be used all together! It is worthwhile remembering that search engines know that words in bold or italics are important, but dont overdo it as it can become annoying.

Now a good alternative to the 'br' style of line break if you had a lot of text - especially if you were cutting and pasting would to use the preformat (<pre> </pre> ) tag. By enclosing a block of text in this magic tag pair you will find that all the spacing and line breaks in it are preserved. It can save a lot of work!

You can also change the color, size and typeface of text by using a CSS span statement.

In addition there are ways of specifying text as a subject header, these header tags (<h1> to <h6>) also change the text styles but this can be over ridden. Headers are useful because search engines pay special attention to words in h1-h3 tags.

<html>
<head>
<title>Grungeadeliac Font Styling</title>
<style>
body {background:pink;}
</style>
</head>
<body>
This is <span style="color: red;" >red text</span> 
This is <span style="color: red; font-size:8px" >small red text</span> ...
This is <span style="color: blue; font-size:42px" >big blue text</span> <br>
This is <span style="color: brown; font-family:'Courier' monospace" >brown monospace text</span> ...
This is <span style="color: black; font-family:'Times New Roman' serif" >black serif text</span> ...
This is <span style="color: white; font-size:150%; font-family:'Castellar' fantasy" >big white fantasy text</span><br>
This is <span style="color: green; font-size:49px; font-family:'Arial Narrow'  sans-serif" >big green sans-serif</span> <br>
This is <span style="color: red; font-family:'Courier' monospace; text-decoration:line-through" >red monospace text struck through</span> ...
This is <span style="color: black; font-family:'Times New Roman' serif; text-decoration:overline;" >black serif text overlined</span> ...<br>
<span style="color: red; font-size:39px; text-decoration:overline underline blink line-through" >We wont even go here!</span> ...<br>
<h1>This is an h1 header</h1>
<h2>This is an h2 header</h2>
<h6>This is an h6 header</h6>
<h1 align=center>This is an h1 header centered</h1>
<h1 align=center style="color: green; font-size:19px; font-family:'Arial Narrow'  sans-serif">This is a restyled h1 header centered</h1> 
</body>
</html>

Are you human?

8748 - 94 =

Note that some text faces do not display on some browsers, if that type of font is not installed. In this case it defaults to the browsers standard font. Text size can be specified as pixels (px) or a percentage of normal text height, or in points (pt) which is a measurement based on the texts line weight.

You can also apply font decoration which may be underline, overline, blink, line-through, all/any combination of these or mercifully none.

Next: Text Structure

Tutorial Contents

Items marked with an asterisk (*) are optional

HTML Tutorial Referrers

bookmark hit - internal hit - www.blogster.com - ... - ... - dynosphere.com - hitzmarxx.com - www.google.it - tech.webmaggu.com - www.minkpink.net - www.suprasociety.org - ... - sweb.uky.edu - ... - stavochka.com - www.niche.bz - ... - ... - xinba8.info - motoaventura.ro - ... - www.macplora.org - www.larryto.net - www.google.nl - www.google.gr - ... - ... - www.sports-2.com - www.newyorkerr.net - www.health-4.com - www.musicstorein.biz - www.ip4help.com - www.phone-no.net - ... - ... - ... - www.hgt435lop345.com - www.wiibuy.biz - www.google.ru - www.google.com - www.google.ca - www.google.ro - www.google.co.in - www.google.com.pk - www.sitepoint.com -

This list of people who link to this Tutorial page is automagically maintained. Link to us, send traffic, and get listed. Simple.