Introduction
Changing text color is one of the most basic formatting options when creating web pages. By default, text on a web page is black. However, you can change the text to any other color to make it stand out or match your site’s color scheme.
The easiest way to change text color in HTML is by using Cascading Style Sheets (CSS). With CSS, you can use color names, RGB values, HEX codes, HSL values, and more to customize text. However, there are also ways to change text color without CSS by using HTML attributes and elements.
In this 4000 word guide, we will cover multiple methods to change text color in HTML without CSS, including:
- Using the font tag and color attribute
- Using the basefont tag and color attribute
- Using the body tag and text attribute
- Using the bgsound tag and color attribute
- Using inline styles
We will provide code examples and visual demonstrations for each method. By the end, you will have a detailed understanding of how to use native HTML to customize text color on your web pages.
Using the font tag and color attribute
The simplest way to change text color in HTML is by using the font tag along with the color attribute. The font tag allows you to specify font style, size, and color.
To use it to change text color, add a font tag around the text you want to style. Then include a color attribute with a color value:
“`html
This text will be red
“`
This will render the text in red, like this:
This text will be red
The font tag is deprecated in HTML5, meaning it is no longer recommended. However, it still works in all major browsers.
You can use any of the 140 supported color names including:
| Color Name | Preview |
|---|---|
| red | |
| green | |
| blue |
Or you can use HEX values, like:
“`html
This text will be blue
“`
This text will be blue
RGB values also work:
“`html
This text will be red
“`
This text will be red
The font tag is limited in that it can only apply a single color to all text inside it. To color specific words or sentences, you need to add a separate font tag around each portion:
“`html
This text will be different colors.
“`
This text will be different colors.
So the font tag gives you basic single-color text formatting, but becomes tedious if you want multi-colored text.
Using the basefont tag and color attribute
Similar to the font tag, the basefont tag also allows changing text color using the color attribute.
However, there are two key differences:
- basefont sets the default text color for the entire document
- font only affects the text within that tag
To use basefont, add it in the head section of your HTML document:
“`html
“`
This will make all text green by default:
All text after the basefont tag will inherit the green color. To override the base color for specific text, use the font tag:
“`html
This text will be blue, even though the base is green.
“`
This text will be blue, even though the base is green.
Like font, the basefont tag is deprecated in HTML5. But it can still be useful for quickly changing the default text color site-wide.
Using the body tag and text attribute
The body tag also supports a color attribute to set the text color for the entire document body.
Add it to the opening body tag:
“`html
“`
This text is red.
This works the same as basefont, making all text inside the body red by default.
You can override it with font tags:
“`html
This text is blue
“`
This text is blue
The text attribute is deprecated, so the body tag approach isn’t commonly used. But it’s good to know as an option if you want to set a page-wide text color.
Using the bgsound tag and color attribute
Here’s an unusual HTML element that also supports color attributes – the bgsound tag.
The bgsound tag was originally used to add background audio to a web page. But it also allows you to set a color attribute:
“`html
“`
This will make all following text purple:
This text is now purple since it is after the bgsound tag.
Like the other tags we’ve covered, bgsound sets a page-wide default text color. You can override it by wrapping specific text in font tags:
“`html
This text will be green
“`
This text will be green
The bgsound tag is deprecated and no longer supported in HTML5. But it can still work in some browsers as a way to change default text color.
Using inline styles
Now let’s look at a CSS-free option that gives you more flexibility – inline styles.
With inline styles, you can target specific HTML tags or elements and set a color:
“`html
This paragraph text will be red
“`
This paragraph text will be red
Note that you need to use the American spelling “color” and not “colour” for inline styles.
You can use inline styles with any HTML tag and apply colors several ways:
**With color names:**
“`html
Blue heading
“`
Blue heading
**With HEX values:**
“`html
Purple paragraph
“`
Purple paragraph
**With RGB values:**
“`html
“`
**With HSL values:**
“`html
Cyan colored text
“`
Cyan colored text
This makes inline styles much more flexible than the previous color attributes we covered.
You can use them to target headings, paragraphs, divs, spans, links, and any other HTML element. And you can mix and match colors across different elements.
The downside is that inline styles only apply to the specific tag they are added to. To color more text, you need to add more style attributes.
Let’s look at an example with multiple colors:
“`html
Blue heading
Red paragraph
Green paragraph
“`
Blue heading
Red paragraph
Green paragraph
As you can see, inline styles give you fine-grained control over text color without CSS.
Tips for changing text color without CSS
Now that you know how to change text color using pure HTML, here are some tips to use these techniques effectively:
- Avoid deprecated tags like font, basefont, and bgsound for best practices
- Inline styles offer the most flexibility for unique coloring
- Watch out for inheritance issues if setting page-wide colors
- Use color names for readability instead of HEX or RGB values
- Change colors sparingly to avoid visual distractions
- Ensure sufficient contrast between text and background
For single-color text changes, the font tag is quick and easy. But lean more on inline styles as needed for multicolor text formatting.
Also be cautious about setting default colors using basefont or body tags. Child elements may inherit color in unintended ways.
When possible, opt for named colors like “red” and “green” rather than HEX codes or RGB values. This makes your HTML more readable.
Be judicious when applying color or you risk decreased usability. Only use different colors when they truly aid comprehension.
And make sure there is enough contrast between text colors and the background. Low-contrast text is difficult to read.
With the right approach, you can customize text color purely through HTML without CSS.
Limitations of changing text color without CSS
Modifying text color using the HTML methods we’ve covered has some drawbacks to keep in mind:
- Lack of flexibility compared to CSS
- Inline styles bloat up HTML code
- Deprecated tags may not work in new browsers
- No central control like CSS classes or IDs
- Can only set flat colors, not gradients
- Global colors may override other formatting
The CSS alternatives for changing text color give you more advanced options:
- CSS classes apply colors site-wide
- Pseudo-classes like :hover change color on events
- Shadows, gradients, and image fills are possible
- More specificity control with selectors
- Media queries adapt colors responsively
- Variables and mixins allow color reuse
So while HTML-only approaches work in a pinch, CSS gives far more power and flexibility for text styling.
Should you change text color without CSS?
Given the limitations, should you change text colors using only HTML instead of CSS?
Here are some cases where it may make sense:
- On simple pages with minimal styling needs
- For email HTML where CSS support can be limited
- For accessibility when CSS fails to load
- When you have constraints preventing CSS use
- If you need to troubleshoot color issues
- To learn fundamentals of HTML formatting
For complex sites with advanced functionality, only using HTML is not advised.
But on pages with very basic styling needs, the HTML options may suffice.
Email HTML in particular can benefit since CSS support varies across email clients.
Relying on HTML also provides a fallback if CSS fails to load, maintaining readability.
In some development environments, using CSS may not be possible or feasible. HTML colors would still work.
Troubleshooting color problems can also require eliminating CSS variables. HTML isolatesthe issue.
And understanding native HTML text styling builds a foundation before adding CSS.
So in the right cases, sticking with HTML text colors is reasonable. But CSS unlocks far more possibilities.
Conclusion
Changing text color without CSS is achievable through HTML alone.
The font, basefont, body, and bgsound tags all allow color attributes. Inline styles provide fine-grained color control.
However, CSS text color styling is more flexible and maintainable long-term.
Sticking with pure HTML color methods makes sense in simple documents or environments limiting CSS.
But for most robust websites and applications, CSS should be used to customize text colors.
This concludes our guide on changing text color in HTML without CSS. The key takeaways include:
- Use the font tag and color attribute for simple single-color changes
- Set default colors page-wide with basefont or body tags
- Target inline styles to HTML tags for granular multicolor text
- Inline styles provide the most flexibility out of HTML-only options
- Deprecated tags still work in most browsers but may lack support in newer ones
- CSS offers central control, gradients, responsiveness, and more for text color
- Stick to HTML-only colors for simple needs or limited environments
With the techniques covered here, you can take control over text color without ever leaving HTML. But leverage CSS to unlock far richer styling capabilities.
