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.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Did you find this article helpful?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Need More Help?

Help Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

Get help with your questions from our community of like-minded hosting users and Web Hosting Hub Staff.

Not a Customer?

Get web hosting from a company that is here to help.
}