Welcome to How2Code

In this lesson, we will:

  • Learn how to make text bold
  • Learn how to italicize text
  • Learn how to change the color of text
  • Learn how to change the size of text

Let's get started:

Bold and Italic

Bold text can be achieved two ways: the <b> tag or the <strong> tag. It doesn't really matter which way you do it as long as you're consistent.

Italics can also be achieved two different ways: the <i> tag or the <em> tag. Same story here.

Color and Size

Color and size are slightly harder to change compared to making the text bold or italic. Still, it can be accomplished easily.

To change the color of some text, you need to use the <span> tag with a style attribute. You have to put the the word color, a colon and then the name of the color you want. For example, the first few words of this paragraph look like the following in the source code:

<span style="color:red">To</span> <span style="color:orange">change</span> <span style="color:green">the</span> <span style="color:blue">color</span> <span style="color:indigo">of</span> <span style="color:purple">some</span> text

Font size uses the same tags as text color, except instead of color, the word is font-size. The text after the colon must be one of several formats:

  • {NUMBER}pt is the size formatting you are familiar with from your rich text editor (for example, Microsoft Word or OpenOffice.org)
  • {NUMBER}px is used to specify a number of pixels of height for the text. If you think of the smallest dot you can show on your screen, that's one pixel.
  • {NUMBER}cm or {NUMBER}in are centimeter and inch sizes, not recommended.
  • {NUMBER}% or {NUMBER}em are percent and decimal notation to compare the font size with the one in the text surrounding the text you are formatting. For example, 150% and 1.5em should be about equal.

If you want to include both a size and color in the same text, simply put a semicolon after the name of the color, in the format "color:{NAME};font-size:{SIZE}".

16,777,216 colors

Can't think of 16,777,216 colors off the top of your head? I don't blame you, only computers can possibly do that. You shouldn't really use what I taught you about color names if you want to have exact coloring on your webpage. You should use hexadecimal notation.

There are 256 different levels that you can put red, green, and blue to. The way you format a hexadecimal color is color:#RRGGBB, with RR being red, GG being green, and BB being blue. The first letter/number for each of the colors is the main one, the second one does minor adjustments. You can use digits 1-9 and letters A-F to specify how much of that color should be shown.

See you next time!

How2Code was filmed before an emulated sabayon linux computer. No actual computers were harmed in the making of this webpage. How2Code is powered by electricity and the food that Ben ate while he was thinking about what he should write. Do not eat this. It doesn't taste good. Viewer discretion is two words.

This is Ben, signing off. See you next time!

Go back to the table of contents