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 thebackground-colorproperty 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;
}
Top comments (0)