# How to Change the Background Color in HTML Changing the background color in HTML is one of the most fundamental styling tasks in web development. Whether you're building a personal page, a prototype, or a full application, controlling background color is something you'll do constantly. The method you use — and how cleanly it works across browsers and devices — depends on a few key factors worth understanding before you write a single line of code. ## The Two Core Approaches: Inline HTML vs. CSS There are two main ways to set a background color in HTML: using an **HTML attribute** directly on an element, or using **CSS** (Cascading Style Sheets). These aren't interchangeable choices — they represent different philosophies of web development, and one is strongly preferred in modern practice. ### The Old Way: The `bgcolor` Attribute Older HTML used the `bgcolor` attribute to set background colors on elements like ``, ` `, and `
| `: ```html ``` This works in many browsers, but it's **deprecated in HTML5**. That means it's no longer part of the official standard, may behave inconsistently, and could stop being supported in future browser versions. If you're writing new HTML, avoid `bgcolor`. ### The Right Way: CSS `background-color` The modern, standards-compliant approach is to use the CSS `background-color` property. You have three ways to apply it: **1. Inline styles** — applied directly to a single HTML element: ```html ``` **2. Internal stylesheet** — written inside a ` ``` **3. External stylesheet** — written in a separate `.css` file and linked to your HTML: ```html ``` In `styles.css`: ```css body { background-color: #1a1a2e; } ``` Each of these produces the same visual result, but they differ significantly in **maintainability, scalability, and best practice**. ## How Colors Are Specified in CSS 🎨 CSS accepts several color formats, and understanding them gives you more control: | Format | Example | Notes | |---|---|---| | **Named colors** | `background-color: red;` | Easy to read; limited set (~140 options) | | **Hex codes** | `background-color: #ff5733;` | Most common; 6-digit RGB in hexadecimal | | **RGB values** | `background-color: rgb(255, 87, 51);` | Explicit red, green, blue channels (0–255) | | **RGBA values** | `background-color: rgba(255, 87, 51, 0.5);` | Adds an **alpha** (opacity) channel | | **HSL values** | `background-color: hsl(11, 100%, 60%);` | Hue, saturation, lightness — intuitive for designers | | **CSS variables** | `background-color: var(--brand-color);` | Dynamic and reusable; ideal for theming | The **hex code** format is the most widely used in practice. RGBA is particularly useful when you need a semi-transparent background over an image or another element. ## Changing Background Color on Specific Elements You're not limited to the `` tag. You can set background color on **any block or inline-block element** — a ` `, a ` |