</CSS3 BACKGROUND COLOR>

What is CSS3 background-color property?

The background-color property specifies the background color of an HTML element. Background-color is very useful CSS Property for creating attractive websites.

Style_Sheets @Import_Rule Structure Box_Model Background_Image Media_Queries Fonts Box_Shadow FlexBox Grid Transition Animations 2D_Transform 3D_Transform Filter_Property Inheritance Vertical_Centering Responsive_UI CSS_Quiz

</CSS3 Background Color Property>

Use background-color property and give a better look to your web pages.

CSS3 Background-color Property

You can change background of your website using CSS background-color property.

{background-color :  red;}
                    
property            value

Example

Here is a simple example of background-color property
Here we are changing the background-color of a <div> Tag.
On running the code you can see the purple background on <div> Tag


	<!DOCTYPE html>
<html>
	<head>
		<title>Button</title>
	</head>
<body>
<div style="background-color:purple;
padding:30px;color:white">
    TDB Tutorials
</div>
</body>
</html>

Try it Yourself

</Background-Color Examples>

We can use different color codes on our web page

Examples

Black background-color

Red background-color

Green background-color

Blue background-color


<!DOCTYPE html>
<html>
	<head>
		<style>
		.tdb-school{color:rgb(255,255,255);padding:10px 35px;
			border:none;border-radius:5px}
			.black{background-color:rgb(0,0,0)}
			.red{background-color:rgb(255,0,0)}
			.green{background-color:#008000}
			.blue{background-color:#0000ff}
		</style>
	</head>
	<!--Body-->
	<body>
		<button type="submit" class="black tdb-school">
		Press</button>
		<button type="submit" class="red tdb-school">
		Press</button>
		<button type="submit" class="green tdb-school">
		Press</button>
		<button type="submit" class="blue tdb-school">
		Press</button>
	</body>
</html>

Try it Yourself