Changing Font Colors and Sizes

On your website, by default the text will be black, but sometimes you might want to use a different font color.  You also might want to make some text bigger.  This can be done by using styles.

HTML coding has changed in the last several years. It is now best practice to use styles when changing font color, type, size, etc.  There are different methods for implementing styles, which we will cover in a later article. In this example we will use an inline style to change just one paragraph.  The properties for font color, type, and size look like this:

• color: determines the color of the font
• font-size: determines the size of the font
• font-family: determines the type of font

In your html file, insert a <p> tag to start a new paragraph:

<p>

Then we will begin adding the style attribute to the <p> tag as shown:

<p style=>

Now we need to add our first declaration to our style attribute. A declaration is composed of a property and value. Let's start with changing the color to blue:

<p style="color:blue">

Note that the property and value are separated by a colon and the declaration is enclosed in quotation marks. It's important to keep in mind that leaving out the colon or the quotation marks can cause errors.

Next, to increase the font size, we will add a second declaration to the style attribute:

<p style="color:blue;font-size:18px">

Notice when we added the second declaration that we insert it inside of the quotation marks and separate it from the first declaration with a semi-colon (;)

Finally we add our text and close our paragraph with the </p> tag:

<p style="color:blue;font-size:18px;">This is a paragraph!</p>

That is it!  Now, when we view this page in a browser, the line will look like:

This is a paragraph!

To read more about styles and how to use CSS, please see the CSS section of the Education Channel.