Course/Module 1/Topic 3 of 4Beginner

Colors & Backgrounds

Learn how to set text colors, background colors, and background images using CSS. This is a foundational concept in styling and visual design that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world CSS experience. Take your time with each section and practice the examples

20 min•By Priygop Team•Last updated: Feb 2026

CSS Colors

CSS supports many ways to specify colors: by name (red, blue), hex code (#ff0000), RGB (rgb(255,0,0)), RGBA (with transparency), and HSL. Hex codes are the most common in professional web development.

Color Properties

color — Sets text color
background-color — Sets background color
Named colors: red, blue, green, white, black, etc.
Hex: #ff0000 (red), #00ff00 (green), #0000ff (blue)
RGB: rgb(255, 0, 0) — red, green, blue values 0-255
RGBA: rgba(255, 0, 0, 0.5) — last value is opacity (0-1)
background-image: url('image.jpg') — background image

Colors Example

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .box1 { background-color: #04AA6D; color: white; padding: 15px; margin: 5px; }
    .box2 { background-color: rgb(231, 76, 60); color: white; padding: 15px; margin: 5px; }
    .box3 { background-color: rgba(52, 152, 219, 0.5); padding: 15px; margin: 5px; }
    .box4 { background-color: #f39c12; color: #333; padding: 15px; margin: 5px; }
  </style>
</head>
<body>
  <div class="box1">Green background (#04AA6D)</div>
  <div class="box2">Red background (rgb)</div>
  <div class="box3">Blue with 50% opacity (rgba)</div>
  <div class="box4">Orange background (hex)</div>
</body>
</html>

Try It Yourself: Colors

Try It Yourself: ColorsCSS

CSS Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<head>
  <style>
    body{
      #9cdcfe">background-color: #1a1a2e;
      #9cdcfe">font-family: Arial, sans-serif;
      #9cdcfe">padding: 20px;
    }
    h1{ #9cdcfe">color: #e94560; }
    .card{
      #9cdcfe">background-color: #16213e;
      #9cdcfe">color: #eee;
      #9cdcfe">padding: 20px;
      #9cdcfe">margin: 10px 0;
      #9cdcfe">border-radius: 8px;
      #9cdcfe">border-left: 4px solid #04AA6D;
    }
    .highlight{ #9cdcfe">color: #04AA6D; #9cdcfe">font-weight: bold; }
  </style>
</head>
<body>
  <h1>Color Demo</h1>
  <div class="card">
    <p>Try changing the <span class="highlight">background-color</span> values!</p>
    <p>Use hex codes like #ff6b6b or rgb(255, 107, 107)</p>
  </div>
  <div class="card">
    <p>Dark theme example using CSS colors.</p>
  </div>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

CSS|32 lines|722 chars|✓ Valid syntax

UTF-8

Quick Quiz

Topics in This Module

Course/Module 1/Topic 3 of 4Beginner

Colors & Backgrounds

20 min•By Priygop Team•Last updated: Feb 2026

CSS Colors

Color Properties

color — Sets text color
background-color — Sets background color
Named colors: red, blue, green, white, black, etc.
Hex: #ff0000 (red), #00ff00 (green), #0000ff (blue)
RGB: rgb(255, 0, 0) — red, green, blue values 0-255
RGBA: rgba(255, 0, 0, 0.5) — last value is opacity (0-1)
background-image: url('image.jpg') — background image

Colors Example

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .box1 { background-color: #04AA6D; color: white; padding: 15px; margin: 5px; }
    .box2 { background-color: rgb(231, 76, 60); color: white; padding: 15px; margin: 5px; }
    .box3 { background-color: rgba(52, 152, 219, 0.5); padding: 15px; margin: 5px; }
    .box4 { background-color: #f39c12; color: #333; padding: 15px; margin: 5px; }
  </style>
</head>
<body>
  <div class="box1">Green background (#04AA6D)</div>
  <div class="box2">Red background (rgb)</div>
  <div class="box3">Blue with 50% opacity (rgba)</div>
  <div class="box4">Orange background (hex)</div>
</body>
</html>

Try It Yourself: Colors

Try It Yourself: ColorsCSS

CSS Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<head>
  <style>
    body{
      #9cdcfe">background-color: #1a1a2e;
      #9cdcfe">font-family: Arial, sans-serif;
      #9cdcfe">padding: 20px;
    }
    h1{ #9cdcfe">color: #e94560; }
    .card{
      #9cdcfe">background-color: #16213e;
      #9cdcfe">color: #eee;
      #9cdcfe">padding: 20px;
      #9cdcfe">margin: 10px 0;
      #9cdcfe">border-radius: 8px;
      #9cdcfe">border-left: 4px solid #04AA6D;
    }
    .highlight{ #9cdcfe">color: #04AA6D; #9cdcfe">font-weight: bold; }
  </style>
</head>
<body>
  <h1>Color Demo</h1>
  <div class="card">
    <p>Try changing the <span class="highlight">background-color</span> values!</p>
    <p>Use hex codes like #ff6b6b or rgb(255, 107, 107)</p>
  </div>
  <div class="card">
    <p>Dark theme example using CSS colors.</p>
  </div>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

CSS|32 lines|722 chars|✓ Valid syntax

UTF-8

Quick Quiz

Topics in This Module

Priygop - Leading Professional Development Platform | Expert Courses & Interview Prep