How can I change my font color with html?

Question

I'm making a web page where I want the color of the font to be red in a paragraph but I'm not sure how to do this.

I was using FrontPage for building web pages before so this HTML stuff is really new to me. What is the best way to do this?

Answer 1

<p style="color:red">Your Text here</p>

But as others have by now said in more and better words: Even better than the above would be to use classes or IDs and assign the CSS-attributes to that instead of using the inline style.

Answer 2

<p style="color:red">Foo</p>

Or preferrably:

<p class="error">Foo</p>

Where "error" is defined in your stylesheet:

.error {
    color: red;
}

Answer 3

<style type="text/css">
.myCSS
{
     color:red
}
</style>

<div class="myCSS">text</div>
<span class="myCSS">text</span>
<p class="myCSS">text</p>

<!--  table elements..... -->
<td class="myCSS">text</td>
<tr class="myCSS">text</tr>

Answer 4

The preferred way to do this is using Cascading Style Sheet (CSS). This allows you to edit the visual aspects of the site without having to deal much with the HTML code itself.

Explanation :

<[tag] style="[css]"> Content </[tag]>

Where [tag] can be anything. For example "p" (paragraph), "span", "div", "ul", "li".. etc.

and where [css] is any valid CSS. For example "color:red; font-size:15px; font-weight:bold"

---

The recommended way to add style to a html element is by assigning it a "class" (a identifier that can be repeated on the document) or a "id" a unique identifier that shall not be repeated in the document.

For example:

<[tag] id="element1" class="red"> Content </[tag]>
<[tag] id="element2" class="red"> Content </[tag]>

Where tag is any html valid tag. id is a unique arbitrary name and class is an arbitrary name that can be repeated.

Then in the CSS (inside the tags of your document):

<style type="text/css">

.red {
    color:red;
}

#element1 {
    background-color:black;
}

</style>

For this example and to keep it simple to new users I named the class "red". However class="red" isn't the best example of how to name . Better to name CSS classes after their semantic meaning, rather than the style(s) they implement. So class="error" or class="hilight" might be more appropriate. ( Thanks to Grant Wagner for pointing that out )

---

Brief CSS Explanation :

Since most of the answers you're getting are all mentioning CSS, I'll add a small guide on how it works:

Where to put CSS

First of all, you need to know that CSS should be added inside the tags of your document. The tags used to define where the CSS is going to be are:

<style type="text/css"> <!-- Your CSS here --> </style>

This is called embedded CSS since it's inside the document. However, a better practice is to link "include it" directly from an external document by using the following tags:

<link href="file.css" media="all" rel="stylesheet" type="text/css"/>

Where file.css is the external file you want to include into the document.

The benefits of using the "link" tag is that you don't have to edit in-line CSS. So lets say if you have 10 HTML documents and you want to change the color of a font you just need to do it on the external CSS file.

This two ways of including CSS are the most recommended ways. However, there's one more way that's by doing in-line CSS adjustments, for example:

<[tag] style="<!-- CSS HERE -->"> Content </[tag]>

CSS General Structure

When you code write CSS, the first thing you need to know is what are classes and what are id's. Since I already mentioned what they do above I'm going to explain how to use them.

When you write CSS you first need to tell which elements you're going to "select", for example:

Lets say we have a "div" element with the class "basic" and we want it to have a black background color, a white font, and a gray border.

To do this we first need to "select" the element:

.[identifier] { }

Since we're using a class we use a "." in front of the identifier which in this case is: "basic", so it will look like this:

.basic { }

This is not the only way, because we're telling that ANY element that has the class "basic" will be selected, so lets say we JUST want the "div" elements. To do this we use:

[html-tag].[identifier] { }

So for our example it will look like this:

div.basic { }

Now we've selected the "div" with the class "body". Now we need to apply the visual style we wish. We do this inside the brackets :

div.basic {
    background-color:black;
    color:white;
    border:1px solid gray;
}

With this, we just applied successfully a visual style to all "div" elements that have the "basic" class attached.

Remember this doesn't just apply for "class" it also applies for "id" but with a slight change, here an example of the final code but instead of a class we'll just say it's a "id"

#unique-basic {
    background-color:black;
    color:white;
    border:1px solid gray;
}

For a complete guide to CSS you can visit this link: http://www.w3schools.com/css/

Remember:

Keep your HTML Code clean and use CSS to modify ANY visual style that's needed. CSS is really powerful and it'll save you a lot of time.