HTML Background and Text Colors

How to Change Text and Background Colors in HTML

You can change the text color and background color of any HTML element using the style attribute and CSS properties.


1. Change Text Color with color

Use the color property to change the text color.

<p style="color: green;">This is green text.</p>

You can use:

  • Color names (red, blue)
  • Hex codes (#ff0000)
  • RGB or HSL values

2. Change Background Color with background-color

Use the background-color property to change the element's background.

<div style="background-color: lightblue;">This has a light blue background.</div>

3. Combine Text and Background Color

You can apply both properties together.

<h2 style="color: white; background-color: black;">White text on black background</h2>

4. Using Hex or RGB Colors


Hex Code Example:

<p style="color: #ff5733;">Hex color text</p>

RGB Example:

<p style="background-color: rgb(240, 240, 240);">RGB background color</p>

Best Practices

  • Use colors that provide good contrast for readability
  • Prefer external CSS for consistent styling across pages
  • Use inline CSS only for quick styling or testing
  • Don't overuse inline styles in production websites