# How to Change the Font Colour in HTML: Methods, Best Practices, and What to Consider Changing text colour in HTML sounds simple — and at its core, it is. But the *right* approach depends on how your project is structured, what level of control you need, and whether you're writing modern, maintainable code or quickly styling a standalone element. Here's a clear breakdown of every method, when each makes sense, and the factors that determine which approach fits your situation. ## The Old Way: The ` ` Tag (and Why It's Deprecated) Older HTML tutorials still show the `` tag with a `color` attribute: ```html This text is red. ``` This worked in HTML 4 and earlier, but **the `` tag was deprecated in HTML 4.01 and removed in HTML5**. Modern browsers still render it for backward compatibility, but you should never use it in new projects. It mixes presentation with structure, makes code harder to maintain, and won't pass HTML validation. Mention it here so you recognise it in legacy code — not as a tool to use. ## The Modern Standard: CSS for Font Colour The correct way to change font colour in HTML is through **CSS using the `color` property**. CSS separates style from structure, making your code cleaner and far easier to update at scale. ### Method 1: Inline CSS Apply a style directly to an individual HTML element using the `style` attribute: ```html
This paragraph is blue.
This heading uses a hex colour.
``` **When it makes sense:** Quick one-off changes, email HTML templates, or situations where external stylesheets aren't available. **Downside:** Doesn't scale. If you want to change that colour across 50 paragraphs, you'll edit 50 lines. ### Method 2: Internal CSS (Style Block) Place a ` ``` **When it makes sense:** Single-page projects, quick prototypes, or when you don't want a separate stylesheet. **Downside:** Styles only apply to that one HTML file. Harder to maintain across a multi-page site. ### Method 3: External CSS Stylesheet 🎨 Link a separate `.css` file to your HTML document: ```html ``` Inside `styles.css`: ```css body { color: #222222; } h2 { color: #0057B8; } .error-text { color: crimson; } ``` **When it makes sense:** Any project with more than one page. This is the professional standard — change a colour once and it updates everywhere that class or selector is used. ## CSS Colour Value Formats The `color` property accepts several formats. Each has its place: | Format | Example | Notes | |---|---|---| | **Named colours** | `color: tomato;` | 140+ predefined names; readable but limited | | **Hex codes** | `color: #FF5733;` | Most widely used; precise 6-digit RGB values | | **RGB** | `color: rgb(255, 87, 51);` | Good when generating colours programmatically | | **RGBA** | `color: rgba(255, 87, 51, 0.8);` | Adds opacity control (0 = transparent, 1 = solid) | | **HSL** | `color: hsl(14, 100%, 60%);` | Intuitive for designers adjusting hue/saturation/lightness | | **OKLCH / modern formats** | `color: oklch(65% 0.2 30);` | Newer CSS4 format; better perceptual uniformity; check browser support | For most general web development, **hex codes and named colours** are the most portable and universally supported. ## Targeting Specific Elements vs. Groups Understanding CSS **selectors** determines how precisely you can apply colours: - **Element selector** — `p { color: grey; }` targets every `` tag - **Class selector** — `.warning { color: red; }` targets any element with `class="warning"` - **ID selector** — `#header-title { color: navy; }` targets one specific element - **Inline element** — Wrap text in a `` to colour part of a line: `just this phrase` The `` tag is particularly useful when you need to change the colour of **a word or phrase within a sentence** without affecting the surrounding text. ## Inheritance and the Cascade CSS colour **inherits by default**. Set `color` on a parent element like `` or a `
`, and child elements inherit it unless overridden. This is why defining a base text colour on `body` is a common pattern — it sets a site-wide default you only override where needed. **Specificity** determines which rule wins when multiple rules target the same element. Inline styles beat internal styles, which beat external styles — unless `!important` is used (sparingly and deliberately). ## Accessibility: Colour Contrast Matters 👁️ Changing font colour isn't purely aesthetic. **WCAG (Web Content Accessibility Guidelines)** recommends a minimum contrast ratio of **4.5:1** for normal text and **3:1** for large text against the background. Low-contrast colour choices — light grey on white, yellow on white — create real barriers for users with visual impairments. Tools like browser DevTools, the WebAIM Contrast Checker, or design tools like Figma include built-in contrast checkers. Building accessible colour choices into your workflow from the start is far easier than retrofitting them later. ## Variables for Scalable Colour Management For larger projects, **CSS custom properties (variables)** make colour management significantly more efficient: ```css :root { --brand-colour: #0057B8; --text-primary: #1a1a1a; --accent: crimson; } h1 { color: var(--brand-colour); } ``` Change `--brand-colour` once in `:root` and every element using that variable updates instantly. This approach is standard in design systems and component-based frameworks. ## What Determines the Right Approach for Your Project The method that works best depends on variables specific to your situation: whether you're building a single page or a full site, whether you're working in a framework like React or Vue that handles styles differently, your team's conventions, whether accessibility compliance is a requirement, and how comfortable you are managing external stylesheets versus inline styles. A quick personal project has different needs than a production web application maintained by a team. The technical mechanics are the same — but the architecture around them isn't. That gap is where your own setup and goals become the deciding factor.