DEV Community

Cover image for Change background color in CSS
Javav
Javav

Posted on

Change background color in CSS

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

  1. Select the Element: Decide which HTML element you want to change the background color for.

  2. 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>
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

Top comments (0)