How to Change Color and Font in HTML

The Two Ways to Change Color and Font

You change color and font in HTML by adding style attributes directly to your tags, or by writing CSS rules in a separate section. The quickest method for a single word or phrase is the style attribute — you write the instruction right inside the tag itself. For larger sections or when you want the same look repeated across a page, CSS is faster and cleaner because you write the rule once and it applies everywhere.

Both methods do the same job. The difference is how much typing you do and how straightforward it is to change your mind later. This guide covers both, starting with the quickest approach.

Key Takeaways

Use style="color: red;" inside any tag to change text color for just that piece of text.
Use style="font-family: Arial;" inside any tag to change the typeface for just that piece of text.
CSS in the <head> section lets you set colors and fonts for whole groups of tags at once, so you do not repeat the same instruction over and over.
Color names like red, blue, and green work, but hex codes like #FF5733 give you thousands more options.
Common fonts that work on most computers are Arial, Times New Roman, Georgia, and Courier New.

Changing Color With the Style Attribute

The fastest way to change a single word's color is to wrap it in a span tag with a style attribute. A span tag does nothing by itself — it is just a container that holds text. The style attribute is where you tell it what to do.

Here is the pattern:

<p>This is normal text, and <span style="color: blue;">this word is blue</span>.</p>

The browser reads color: blue; and turns that text blue. You can use any color name: red, green, orange, purple, black, white, gray. If you want a specific shade, use a hex code instead — a six-digit code that starts with a hash mark. For example, color: #FF5733; is a burnt orange. Hex codes let you pick from millions of colors, but color names are simpler when they match what you want.

You can also change the color of a whole paragraph or heading the same way:

<h2 style="color: darkgreen;">This heading is dark green</h2>

Changing Font With the Style Attribute

To change the typeface, use font-family instead of color. The pattern is the same:

<p>This is the default font, but <span style="font-family: Georgia;">this part is Georgia</span>.</p>

The fonts that work on almost every computer are Arial, Times New Roman, Georgia, Courier New, and Verdana. If you name a font that is not installed on someone's computer, the browser falls back to a default, so stick with these common ones unless you have a reason not to.

You can combine color and font in the same style attribute by separating them with a semicolon:

<span style="color: navy; font-family: Georgia;">Navy text in Georgia font</span>

Using CSS to Style Multiple Elements at Once

If you want the same color or font on many parts of your page, writing the style attribute over and over is tedious. CSS lets you write the rule once in the <head> section and have it explore to every matching tag on the page.

Put this in your <head>:

Now every <h2> on your page is dark blue and in Arial font. You do not add anything to the tags themselves — the CSS does the work. If you later decide all your headings should be green instead, you change it in one place and every heading updates.

You can also target specific tags with a class. Add a class name to the tags you want to style:

<p class="highlight">This paragraph stands out.</p> <p>This one does not.</p>

Then in your <style> section, write:

Only paragraphs with class="highlight" get the red color and Georgia font. This is useful when you want some paragraphs styled one way and others styled differently.

Common Font Sizes and Weights

While you are changing the font, you might also want to make text bigger or bolder. Use font-size to control size and font-weight to control boldness.

For font size, you can use pixel measurements like font-size: 18px; or font-size: 24px;. Larger numbers make bigger text. For boldness, use font-weight: bold; or font-weight: normal;.

Here is an example combining all three:

<p style="color: darkred; font-family: Georgia; font-size: 20px; font-weight: bold;">This text is dark red, Georgia font, 20 pixels tall, and bold.</p>

Hex Codes for Precise Colors

Color names cover the basics, but if you need a specific shade, use a hex code. A hex code is six digits after a hash mark, like #FF5733. The first two digits control red, the next two control green, and the last two control blue. Each pair ranges from 00 (none of that color) to FF (maximum).

You do not need to memorize hex codes. Search "color picker" online and you will find tools where you click on a color and it shows you the hex code. Copy the code and paste it into your style:

<p style="color: #FF5733;">This is burnt orange.</p>

Hex codes work anywhere you would use a color name. They give you millions of options instead of just a few dozen.

Frequently Asked Questions

What is the difference between inline styles and CSS?

Inline styles (the style attribute) explore to one tag only. CSS in the <head> applies to many tags at once. Use inline styles for one-off changes, and CSS when you want the same look repeated or when you might change it later.

Can I use any font name I want?

You can name any font, but it only works if the person viewing your page has that font installed. Stick with Arial, Times New Roman, Georgia, Courier New, and Verdana unless you know what you are doing. If you want unusual fonts, you need to load them from the web using @import, which is a more advanced technique.

Why does my color not show up?

Check that you spelled the color name correctly and that you included the semicolon at the end. If you are using a hex code, make sure it starts with a hash mark and has exactly six digits. Also check that your tag is spelled right — <span> and <p> are common, but <spann> or <pp> will not work.

Can I change the color of a link?

Yes. Links are <a> tags, so you can add a style attribute: <a href="page.html" style="color: purple;">Click here</a>. In CSS, you can target all links at once with a { color: purple; }.

What if I want different colors for different parts of a paragraph?

Wrap each part in a <span> tag with its own style. For example: <p><span style="color: red;">Red text</span> and <span style="color: blue;">blue text</span> in one paragraph.</p>

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.