Change background color in CSS

Javav — Sun, 28 Jul 2024 12:23:17 +0000

Changing the background color of an element in CSS is simple and straightforward. The steps are:

Select the Element: Decide which HTML element you want to change the background color for.
Use background-color: Apply the background-color property in your CSS file or within a <style> tag in your HTML.

Example

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container">
    <p id="paragraph">This is a paragraph.</p>
    <button>Click Me</button>
  </div>
</body>
</html>

CSS

/* Change background color of the body */
body {
  background-color: lightblue;
}

/* Change background color of an element with the class 'container' */
.container {
  background-color: lightgreen;
}

/* Change background color of an element with the id 'paragraph' */
#paragraph {
  background-color: lightyellow;
}

/* Change background color of all button elements */
button {
  background-color: lightcoral;
}

DEV Community: Javav

Change background color in CSS

Example

HTML

CSS