19 Aug How to set background color in HTML
Let’s say we want to create a web page with background color orange, like this:
We can easily achieve this in HTML using CSS styles i.e creating inline, internal and external CSS. The CSS background-color property is to be used for this purpose. Following is the correct way to use the property:
Inline CSS
<body style="background-color:orange">
Internal CSS
<head>
<style>
body {
background-color: orange;
}
</style>
</head>
Example
Now, we will create a web page and set background color with all other elements essential for an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>HTML Document</title>
<style>
body {
background-color: orange;
}
</style>
</head>
<body>
<h2>Online Book Store</h2>
<p>Following books are available:</p>
<ul>
<li>Invisible Man</li>
<li>Beloved</li>
<li>The Great Gatsby</li>
<li>The Grapes of Wrath</li>
<li>Their eyes were watching God</li>
</ul>
</body>
</html>
Output
Example 2
<!DOCTYPE html> <html> <body style="background-color:violet;"> <h2>Example Heading</h2> <p>Example text...</p> </body> </html>
Output
Note: A good practice in CSS is to avoid Inline CSS.
No Comments