How To Work CSS Backgrounds - background-color,

In web development, you can set the background color of HTML elements using the background-color property in CSS (Cascading Style Sheets). This property allows you to specify the color that should be used as the background of an element, such as a paragraph, a div, or the entire page. Here’s an example of how to use the background-color property:


<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS style for setting the background color */
    body {
      background-color: lightblue;
    }
    
    .container {
      background-color: #ffcc00; /* You can use color names or hexadecimal values */
      padding: 20px;
      border: 1px solid #333;
    }
  </style>
</head>
<body>
  <h1>This is a Sample Web Page</h1>
  
  <div class="container">
    <p>This is a paragraph with a custom background color.</p>
  </div>
</body>
</html>
Screenshot-2023-11-09-103522 In this example:

We define a CSS style for the <body> element to set the background color to “lightblue.” We also define a CSS style for a <div> element with the class “container.” This sets the background color to a custom color using the hexadecimal value “#ffcc00.” You can specify the background color in several ways:

Color names: You can use predefined color names like “red,” “blue,” “green,” “yellow,” etc. Hexadecimal values: You can specify colors using hexadecimal color codes like “#ff0000” (red), “#00ff00” (green), and so on. RGB values: You can use the RGB color model, like background-color: rgb(255, 0, 0); for red. The background-color property can be applied to various HTML elements, and you can customize the colors to match your design preferences.

Previous
CSS Texts - Color, Alignment, Decoration, transformation, Spacing - letter-spacing, text-indent, line-height
Next
CSS Font Size - px, em, rem, vw, vh