# How to Change Font Colour in HTML: A Complete Guide Controlling text colour is one of the most fundamental skills in web development. Whether you're building a personal site, styling a landing page, or just learning HTML, knowing how to change font colour correctly — and why certain methods are preferred over others — makes a real difference in both your workflow and your final result. ## The Old Way: The ` ` Tag HTML used to include a dedicated `` tag with a `color` attribute. You'd write something like: ```html This is red text ``` This worked, and you'll still see it in legacy codebases. However, **the `` tag is deprecated in HTML5**, meaning modern browsers may still render it, but it's officially unsupported and considered bad practice. Using it today is a bit like driving a car with no seatbelts — technically functional, but not something you'd recommend. ## The Modern Standard: CSS The correct, current approach to changing font colour in HTML is through **CSS (Cascading Style Sheets)** using the `color` property. CSS separates your visual styling from your content structure, which makes sites easier to maintain, update, and scale. ### Inline CSS You can apply colour directly to an HTML element using the `style` attribute: ```html

This paragraph is blue.

``` This is quick and works well for **one-off changes**, but it gets messy fast if you're styling dozens of elements. ### Internal CSS (Style Block) You can add a ` ``` This approach keeps your styling organised within a single file and is practical for **small projects or prototypes**. ### External CSS (Stylesheet) For any serious project, you'll link a separate `.css` file: ```html ``` Then in `styles.css`: ```css body { color: #1a1a1a; } .highlight { color: darkorange; } ``` This is the **most scalable and maintainable** method. One stylesheet can control colour across an entire multi-page website. ## How to Specify Colour Values 🎨 The `color` property accepts several formats, each with its own strengths: | Format | Example | Best Used For | |---|---|---| | **Named colours** | `color: red` | Quick prototyping, readability | | **Hex codes** | `color: #FF5733` | Precise brand colours | | **RGB** | `color: rgb(255, 87, 51)` | When working with dynamic values | | **RGBA** | `color: rgba(255, 87, 51, 0.8)` | Colour with transparency | | **HSL** | `color: hsl(11, 100%, 60%)` | Adjusting hue/lightness intuitively | **Hex codes** are by far the most commonly used in professional web development. Most design tools (Figma, Adobe XD, Canva) output colours as hex, making the handoff from design to code straightforward. **HSL** (Hue, Saturation, Lightness) is increasingly popular because it's easier to reason about — you can nudge a colour lighter or darker by simply adjusting the lightness value, without recalculating the whole hex string. ## Targeting Specific Elements CSS lets you get very specific about which text gets which colour, using **selectors**: - **Element selector** — targets all instances of a tag: `p { color: gray; }` - **Class selector** — targets elements with a specific class: `.warning { color: orange; }` - **ID selector** — targets a unique element: `#header-title { color: navy; }` - **Descendant selector** — targets elements inside another: `article p { color: #444; }` This specificity system is one of CSS's most powerful features, but it also introduces **cascade and inheritance rules** that can trip up beginners. When multiple rules apply to the same element, the most specific one wins. Inline styles override internal styles, which override external stylesheets — unless `!important` is used (which should be a last resort, not a habit). ## Accessibility and Colour Contrast Choosing a font colour isn't purely aesthetic. **Colour contrast** between your text and its background directly affects readability, especially for users with visual impairments. The **Web Content Accessibility Guidelines (WCAG)** define minimum contrast ratios: - **Normal text:** at least 4.5:1 contrast ratio - **Large text (18pt+ or 14pt bold):** at least 3:1 Tools like browser DevTools, Figma plugins, and dedicated contrast checkers let you verify your colour combinations before publishing. A dark-grey text on a white background (#333 on #fff) typically clears accessibility thresholds comfortably. Pure black on white (#000 on #fff) has maximum contrast but can feel harsh for long reading sessions — many designers settle somewhere in between. ## Variables and Design Systems If you're working on a larger project, **CSS custom properties (variables)** let you define a colour once and reuse it everywhere: ✅ ```css :root { --brand-colour: #4A90E2; --text-primary: #222222; } h1 { color: var(--brand-colour); } p { color: var(--text-primary); } ``` Change the value in one place, and it updates across your entire site. This is how modern design systems maintain colour consistency at scale. ## What Shapes Your Approach Several factors determine which method and format makes the most sense for a given situation: - **Project size** — a single HTML page versus a full web application calls for very different levels of CSS organisation - **Team size** — solo developers have more flexibility; teams benefit from stricter conventions and shared stylesheets - **Framework or CMS in use** — WordPress themes, React components, and static site generators each have their own conventions around styling - **Design handoff process** — if you're working from a Figma file, hex codes are typically already defined; if you're experimenting freely, named colours or HSL might be more intuitive - **Accessibility requirements** — projects subject to WCAG compliance (government sites, enterprise software) demand more rigour around contrast choices The right combination of CSS method, colour format, and specificity strategy looks quite different depending on whether you're tweaking a personal blog, building a client site, or contributing to a large codebase with an existing design system already in place.