Basic Font Formatting in HTML

Hi since you're new here, you may want to subscribe to our RSS feed to get convenient updates.. Thanks for visiting!

 

By the end of this tutorial, you’ll know how to change fonts, make text bold, italic, underlined, change the font color, and much more, all using HTML.

The Basics

Fonts, Colors, Sizes – Oh My!

You want to try the fun stuff, huh? Okay.Go back to Introduction to HTML, and following the instructions, create an HTML document. Now, where the <body> is, type the different font styles, accents, and whatever else you’d like to play with.

To change a font type, use this:

<font face=”Bradley Hand ITC”> Hi everyone! </font>

Don’t forget the end tags!

The text should show up as:

Hi everyone!

To add color to your text, try this:

<font color=”red”> My name is Stephanie. </font>

You can use color names, or the hex, which ever you choose.

That shows up as:

My name is Stephanie.

Now, if you want to make your text big use this:

<font size=”12”> This is big text!</font>

That makes the text big, like this:

This is big text!

Now you can combine it all, like this,

<font face=”jokerman” size=”9” color=”blue”> Whee! Color, Big, AND Jokerman font! </font>

Whee! Color, Big, AND Jokerman Font!

Here are some other cool text effects that you can use to make your website really pop.

<b>Bold</b> Bold

<u>Underline</u> Underline

<i>Italics</i> Italics

<s>Slashout</s> Slashout

<sub>Sub</sub>Script SubScript

<sup>Super</sup>Script SuperScript

Isn’t it great? There are many things you can do with HTML that can make your webpage completely awesome. At the same time, we hope you will keep in mind that no matter how cool your site looks to you if others can’t read it they wont be staying around. So use effects sparingly like accessories to an already great outfit.

Press my buttons: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • del.icio.us
  • Facebook
  • Google
  • Live
  • NewsVine
  • Reddit
  • Simpy
  • StumbleUpon
  • Technorati
  • TwitThis
  • Sphinn

|

Comment on this article/tutorial

You must be logged in to post a comment.