HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Colors & Backgrounds

Colors in CSS can be specified in several ways:

Keywords: red, blue, transparent.
HEX: #FF0000. A 6-digit code representing Red, Green, and Blue.
RGB / RGBA: rgb(255, 0, 0) or rgba(255, 0, 0, 0.5) (The A stands for Alpha/Opacity).
HSL: Hue, Saturation, Lightness. Great for building color palettes.

Backgrounds

The background shorthand property allows you to set the color, image, repeat behavior, position, and size of an element's background.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 20px; display: flex; flex-direction: column; gap: 20px; align-items: center; }
    
    .color-box {
      width: 80%;
      padding: 30px;
      text-align: center;
      color: white;
      font-size: 1.2em;
      font-weight: bold;
      border-radius: 8px;
    }
    
    .box1 { background-color: #3498db; } /* HEX */
    .box2 { background-color: rgba(231, 76, 60, 0.8); } /* RGBA with 80% opacity */
    
    .bg-image-box {
      width: 80%;
      height: 250px;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 2em;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
      
      /* Background Image Properties */
      background-image: url("https://picsum.photos/id/1015/800/400");
      background-size: cover; /* Ensures image covers the whole div */
      background-position: center; /* Centers the image */
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>

<div class="color-box box1">Background defined via HEX (#3498db)</div>
  <div class="color-box box2">Background defined via RGBA (with 0.8 Opacity)</div>
  
  <div class="bg-image-box">
    CSS Background Image (Cover & Center)
  </div>

</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz

HTML & CSS Masterclass Tutorial

Course Topics

Colors & Backgrounds

Colors & Backgrounds

Backgrounds

Try It Yourself

Topics