` elements and sets their text to red. The `color` property is **inherited**, meaning child elements will adopt their parent's color unless overridden. ## CSS Color Value Formats Here's where things get more nuanced. CSS supports multiple formats for expressing color, each with its own use cases and advantages. | Format | Example | Best Used For | |---|---|---| | **Named colors** | `color: tomato;` | Quick prototyping, readable code | | **Hex codes** | `color: #ff6347;` | Precise brand colors, design systems | | **RGB** | `color: rgb(255, 99, 71);` | Programmatic color manipulation | | **RGBA** | `color: rgba(255, 99, 71, 0.8);` | Color with transparency | | **HSL** | `color: hsl(9, 100%, 64%);` | Human-readable, theme building | | **HSLA** | `color: hsla(9, 100%, 64%, 0.8);` | HSL with transparency | 🎨 **Hex codes** are the most common in production environments because they map directly to design tool outputs (Figma, Adobe XD, Sketch all export hex values by default). **HSL** is increasingly popular for building design systems because adjusting the lightness value is intuitive when creating shades and tints. ## Targeting Specific Elements You can apply `color` to virtually any element that contains text. Here are common patterns: **Targeting by element type:** ```css h1 { color: #1a1a2e; } a { color: #0066cc; } ``` **Targeting by class:** ```css .highlight { color: #e63946; } ``` **Targeting by ID:** ```css #hero-title { color: #ffffff; } ``` **Inline styles** (applied directly in HTML) also work but are generally discouraged in production code because they're harder to maintain: ```html
This is styled inline.
``` ## Inheritance and the Cascade Because `color` is an inherited property, setting it on a parent element propagates to all children. This is intentional and useful — set `color` on `body` and every text element inherits it unless something more specific overrides it. ```css body { color: #222222; } .sidebar { color: #555555; /* overrides body for sidebar content */ } ``` **Specificity** determines which rule wins when multiple rules target the same element. Inline styles beat ID selectors, which beat class selectors, which beat element selectors. Understanding specificity prevents confusing situations where your color change doesn't seem to apply. The **`!important` declaration** forces a style to override everything else, but relying on it is considered poor practice because it breaks the natural cascade and makes debugging harder. ## Using CSS Variables for Color Management Modern CSS projects frequently use **custom properties** (CSS variables) to manage color systems: ```css :root { --primary-color: #0057b8; --text-dark: #1a1a1a; --text-muted: #6c757d; } h2 { color: var(--primary-color); } p { color: var(--text-dark); } ``` This approach means you update a color in one place and it changes everywhere it's referenced — invaluable for maintaining consistency across large stylesheets or implementing dark/light mode switching. ## Accessibility: Contrast Ratios Matter Font color isn't purely aesthetic. ♿ **WCAG (Web Content Accessibility Guidelines)** define minimum contrast ratios between text color and its background: - **Normal text:** minimum contrast ratio of **4.5:1** - **Large text (18px+ or 14px+ bold):** minimum contrast ratio of **3:1** - **Enhanced level (AAA):** 7:1 for normal text Tools like browser DevTools color pickers, Contrast Checker sites, and design tools like Figma now include built-in contrast checking. Failing contrast requirements affects both usability and legal compliance in certain contexts. ## Variables That Affect Your Approach How you implement font color changes depends heavily on your setup: - **Framework or vanilla CSS** — React, Vue, and Angular projects often use CSS Modules, styled-components, or utility-class systems like Tailwind, where color is applied differently than in plain CSS files - **Design system maturity** — Projects with an established design token system use variables exclusively; smaller projects may use hardcoded values - **Dark mode requirements** — Supporting dark mode means colors need to be conditional, either via CSS variables toggled with a class or via the `prefers-color-scheme` media query - **CMS or third-party templates** — Changing font color inside WordPress themes or website builders may require overriding existing specificity, sometimes with targeted selectors rather than broad rules - **Team conventions** — Some teams enforce Tailwind utility classes exclusively; others use BEM methodology with component-scoped stylesheets A developer building a standalone landing page has very different constraints from someone modifying a component inside a shared design system, or a content editor working inside a theme they didn't author. What the right approach looks like depends entirely on which of those scenarios — or combination of them — matches your own project.