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
|
1 2 3 |
<body style="background-color:orange"> |
Internal CSS
|
1 2 3 4 5 6 7 8 9 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!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
|
1 2 3 4 5 6 7 8 9 10 11 |
<!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