Adding text and changing font style on your web pages


Home page   Basic html   html tables   Image tags   Javascript   Html forms   Free Tracking   Website hosting

This page explains basic html code for text and font styles
Changing your fonts, for the beginner and first time webmasters.

Things you should know about text fonts and their html tags:

  • Text areas on your pages should be easy for your users to read

  • Text and fonts should stand out,it is best to use light color text on a dark background or dark
    text on a light background. Colors should have enough contrast to make reading your text
    easy and not hard on your visitors eyes. Light blue text on a dark blue background is
    a bad idea.
Text example of color contrast light on dark Text example of color contrast dark on light
Example of Poor text and background color contrast


For complete rules and the very latest in html and HTML 4.01 Specifications
Visit www.w3c.org
The World Wide Web Consortium
Formatting text and fonts in your HTML web pages with embedded Style sheets

Embedded Style sheets

An embedded Style sheet is by far the fastest way to format your
web page text. An embedded Style sheet is placed between the
<head></head> tags in your html web page code.
And can set the font style size color properties for your
entire web page. Style sheets can also be files stored someplace else.
Non-embedded style sheets use programming like CSS.
Style sheets are not required and you can use html tags in the body of
your page to format as you go. Style sheets are the recommended way to format
your web pages.

Sample style sheet code:

<head>
<style type="text/css">
<!--
body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #ffffff; margin-left: 0px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; }
h1,h2,h3 {color:black}
h4 {color:blue}
h5,h6 {color:red}
P.bigblue {color:"blue";font-weight:"bold"}
-->
</style>
</head>

The 2 red comment tags inside the style tags prevent a non-supporting browser
from displaying the style code as plain text.
In the first line after the red comment tag , this style sheet code sets
the font-family for the body of this page to Verdana or Arial or Helvetica or sans-serif.
This means that your users internet browser will first look for the Verdana font
on the users computer. If Verdana is not found the browser will look for Arial,Helvetica
and so on. If no specified font is found it will display the browsers default font.
You could specify only one font or no font in which case the browsers default font would be used.
Next in the line of code the color command sets the body font color to black and then
the body background-color to white.
In the next 3 lines after the <style> page heading colors are set.
This is a heading tag <h2> </h2>

This is heading size 1

This is heading size 4

This is heading size 6
In the next line I set a special paragraph class and name it bigblue.
In these paragraphs all text will be bold blue.
Below is the html tag code for the blue paragraph of text below.
<P class="bigblue">the text in bold blue goes here</P>

This paragraph should have bold blue text.
Heading tags are used like headlines in your local newspaper.
Text between heading tags will always be bold.
You can change the size of your heading with the number in the tag
The numbers 1-6 are used in heading tags 1 being the largest
Adding text and fonts in your HTML web pages using html tags

The bold tag

<B></B> displays your text in a bold text style.
Code Example : This is<B> important bold text</B>
Browser Displays :This is important bold text

Big tag

<Big></Big> Displays a large text style.
Code Example : This is<Big>Big News</Big>
Browser Displays :This is Big News

Break tag

<BR>( no end tag end tag is forbidden )Breaks or ends a line of text.
Code Example : Line break 1<BR>Line break 2<BR>
Browser Displays :
Line break 1
Line break 2

Del tag

<del></del> Displays a deleted text.
Code Example : No <del>spam</del>
Browser Displays :No spam

Font tag

<font></font> Changes one or all font attributes - style , size , color.
Code Example : Make a <font face="Georgia">font change</font>
Browser Displays :Make a font change

Code Example : Make another <font face="Georgia" size="5">font change</font>
Browser Displays :Make another font change

Code Example : Change <font face="Georgia" size="1" color="red">style size color </font>
Browser Displays :Change style size color


Home page  Back to top of page

Copyright © 2004 2008 FunwithyourPC
Contact Us