A simple font color change can subtly influence a customer’s perception of your web page. But don’t get carried away and start thinking about neon headlines or garish backgrounds like your tricked-out Myspace page from the aughts—this is about the nuanced art of using color to highlight key information, reinforce promotions, and craft a specific mood.
Whether you’re aiming for a sense of professionalism or playfulness, subtle font color adjustments can turn your ecommerce site into a customer magnet. Here are some useful approaches and tips for changing font color in HTML using CSS font attributes—plus an easy way to change colors in the Shopify theme editor.
What is HTML?
HTML (HyperText Markup Language) is a text-based markup language used to create web pages. It tells a browser how to display text and other elements, like making words bold, changing colors, or creating lists. HTML uses tags to define the structure of a page, marking HTML elements such as headings, paragraphs, and links. Tags tell the browser how to display each part of the content.
Can you use HTML to change font color? In the old days, yes—but you’d have to change the font tag and HTML color attributes on every product page, which was very inefficient. The <font> tag was used to set the typeface and size and change font color, like this:
<h1><font color="green"> Use the code JUNETEENTH for 10% off!</font></h1>
The <font> tag and its color attribute are obsolete in HTML5, the latest version of HTML. While browsers may still render font colors set this way, it’s not recommended due to compatibility issues, poor search engine optimization (SEO), and harder website maintenance. Instead, you can handle font styling using CSS, which provides a cleaner, more efficient, and modern approach to web design.
What is CSS?
CSS, or Cascading Style Sheets, is the language used to define the visual presentation of an HTML document. HTML tags define the structure of the web content (headings, paragraphs, images, etc.), while CSS code controls the styling of that content. For example, the <h1> html tag marks a block of text as a level 1 heading, but it doesn't specify the text’s font, size, or color.
That’s where CSS comes in. Use it to stylize the paragraph’s appearance (typeface, color, size, etc.). For example:
<h1 style="color: red;">This is a RED COLOR HEADLINE </h1>
In HTML5, CSS is the standard best practice for styling. It controls how elements appear on the web page, including layout (e.g., positioning, flexbox, grid), colors (background, text), fonts (type, size, style), and spacing (margins, padding).
CSS is “cascading” because the language applies styles in a hierarchical order, where more specific rules override general ones. This cascading effect means you can fine-tune your design while maintaining a consistent overall look.
Separating design (CSS) from content (HTML) makes websites more maintainable. For instance, you can make global changes across multiple web pages with just one CSS stylesheet. If you want to update the look of product descriptions across your entire site without changing their content, you adjust the stylesheet, and the changes will automatically apply to all linked pages.
3 ways to change font color in HTML
To change the font color in HTML using CSS, there are two primary methods for defining and implementing colors: external stylesheets and internal styles. A third rare method—inline CSS—is used for exceptional cases. Here’s a breakdown of each approach:
1. External stylesheets
External CSS stylesheets are especially useful for large-scale websites because they make HTML code reusable and simplify website maintenance. This method keeps CSS styles in a separate .css file, which you can then link to from all HTML documents. It’s a great way to maintain a consistent style across your entire site.
To link an external stylesheet in HTML, place the link in the head section of your HTML document, which defines general parameters and metadata that browsers and web crawler robots use to interpret the page. (Browsers don’t display this head section to the end user.)
Here’s a simple HTML example of how you would link to an external CSS file in the <head> section of the HTML document:
<head>
<title>My Emporium Using External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
In this example, the link tag inside the <head> section references the “styles.css” file, which contains all the CSS formatting rules for the page.
Next, you’d create the CSS file: styles.css. Here’s some sample code you might include to define colors for various elements:
/* styles.css */
body {
background-color: #f0f0f0; /* Light gray background */
color: #333; /* Dark gray text */
}
h1 {
color: blue;
}
h2 {
color: #555; /* Slightly lighter gray */
}
In the above example, the CSS code changes the default color for text within the body of the HTML document to dark gray on a light gray background. It also assigns specific colors to the level 1 and 2 headings.
2. Internal styles
The second method is internal styles, also known as embedded CSS. Instead of linking to an external stylesheet file, you embed CSS rules directly within the <style> tag inside the <head> section of an individual HTML document.
Internal styles are ideal for smaller projects, like one-page websites, or when a specific page requires unique styling. It can also be useful for quick fixes and overriding styles defined in an external stylesheet.
This html code, for example, changes the color of all paragraphs on this particular webpage to purple:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: purple;
}
</style>
</head>
<body>
<p>This paragraph will be the color purple.</p>
</body>
</html>
3. Inline CSS
The third, more specialized option is inline CSS, which applies styles to individual elements on a web page. Instead of placing styles in the <head> section or an external stylesheet, you define a style attribute directly inside the elements tag, a label that tells the browser what kind of content is inside.
For example, say you want to stylize only one paragraph on a page to be blue. You can use inline CSS to define the color attribute right inside a <p> tag like this:
<p style="color: blue;">This is blue text.</p>
This applies the style only to that specific paragraph and no other element on the page. Inline CSS is the most specific way to apply styles, but it’s best used sparingly to override a default style. Otherwise, overusing inline CSS can make your html file larger and harder to maintain.
Here’s where the cascading order properties of CSS come into play. When multiple CSS rules target the same element (like the <p> tag in the above example), the browser determines which rule takes precedence based on specificity. Here’s the cascading order of precedence:
- Inline styles. Inline styles have the highest specificity and override styles defined in internal <style> tags.
- Internal styles. Internal CSS styles (styles defined in the <head> section) take precedence over external stylesheets.
- External styles. External styles (linked .css files) are the least specific and are overridden by both inline and internal styles.
How to change font color using CSS
The primary methods to change font color in web development are the same for external, internal, and inline stylesheets. You need to use the CSS color property—specifying a color value in one of the following color value formats:
- Color name. A simple, human-readable word for a color, like “red” or “blue.” Color names are straightforward and easy to use. There are 140 supported color names, including blue, red, and green. However, the limited selection can be restrictive.
- Hex code. A six-digit hexadecimal value, such as #FF0000, representing colors in terms of red, green, and blue intensity. The first two characters in the hex value represent red, the next two green, and the last two blue.
- RGB value. A set of three numbers, like rgb(255, 0, 0), specifying the intensity of red, green, and blue color components. Each number ranges from 0 to 255.
- HSL or HSLA value. HSL defines color by hue, saturation, and lightness, like hsl(0, 100%, 50%). It defines colors based on hue (degrees on a color wheel), saturation (percentage of color intensity), and lightness (percentage of white or black)—for example, hsl(276, 100%, 50%). HSLA values add an alpha value for opacity, controlling transparency.
Here’s an example of how to change font color using different color formats within the <head> section of an HTML document. CSS styles are enclosed in curly brackets like these: { }.
<!DOCTYPE html>
<head>
<style>
h1 {
color: green;
}
p {
color: #FF6600; /* Orange */
}
span {
color: rgb(0, 0, 255); /* Blue */
}
</style>
</head>
Now let’s look at what happens when we add HTML markup tags to the body of a sample web page:
<body>
<h1>This heading is green.</h1>
<p>A paragraph that happens to be orange.</p>
<span>This span will appear blue.</span>
</body>
Notice how you don’t have to specify colors for each element individually. The styles we defined in the CSS apply automatically: all <h1> elements will be green, all <p> elements will be orange, and all <span> elements will be blue. If you want to change the color of the <h1> tag, update the value in the <style> section, and the change will automatically apply to all <h1> elements.
If you want to change multiple font colors, you can target multiple elements at once in the stylesheet. For example, to change the font color of all headings, paragraphs, and links, you could apply the following CSS rule:
h1, h2, h3, h4, h5, h6, p, a {
color: purple;
}
This will make all heading levels (h1–h6), paragraphs (p style), and links (a) purple. By placing this rule in an external stylesheet, you can ensure consistent styling across your entire site.
How to use the Shopify theme editor to change your font colors
If you have a Shopify website, changing the font color is as simple as editing your Shopify theme’s setting—no code required. Here’s how it works:
1. Access the Theme Editor. In your Shopify admin, go to Online Store > Themes and click Customize on your active theme.
2. Navigate to Theme Settings. Look for a Theme Settings or Colors section in the theme editor.
3. Modify colors. Change the font colors for elements like headings, body text, and links. You can also choose a new color palette for more sweeping changes.
Each Shopify theme is slightly different, so the color settings’ location may vary. If the theme editor doesn't offer your desired level of color customization, you can add custom CSS to your theme for more specific changes.
How to change font color in HTML FAQ
How do you change text color in HTML without CSS?
It’s not possible to change text color in the current version of HTML (HTML5) without CSS. The old tag with color attribute has been deprecated.
How do I change the color of text in a button in HTML?
To change the color of text in a button in HTML, you can use inline CSS code. Here’s an example:
<button style="color: purple;">BUY NOW</button>
Or you could use embedded or external CSS to create a style for all buttons.
How do you make text look better in HTML?
Use appropriate styles with good contrast between text and background. If your site has a darker color scheme, remember to adjust the font so it's still readable. Choose a professional font family: For example, sans serif Google fonts generally have a clean, easy-to-read look. Adjust font size for different elements like headings and paragraphs. Align text for better readability using the text align property. Common alignment options include left, right, center, and justify.
