How to change Background Color in HTML?
Generally, the web browser displays an HTML document in black and white i.e. the text in black on a white background. However, you can change the appearance of the document by changing the background color and the text color. You can change the background color as illustrated.
<BODY bgcolor=”colorname”>
For example: <BODY bgcolor=”green”> or <BODY bgcolor=”blue”>
However, you can select other colors of your choice. The body color and the text color should be selected in such a way that the appearance of the web page is attractive.
There are three methods to change the background color of a document:
- Using bgcolor attribute
- Using Inline CSS
- Using Internal Stylesheet
Saving an HTML File
Before performing changes to the background color of the document, we need to create an HTML file. Following are the steps to do the same:
Step 1: Click the start button and search for Notepad.
Step 2: Click on the “Notepad“. Then untitled notepad is opened on the screen.
Step 3: Now you can start the HTML code
After completing an HTML document save your file. Perform these steps to save an HTML document.
Step 4: Click the Ctrl+s to save the HTML document.
Step 5: Save document as .html
Method 1: Using bgcolor attribute
HTML provides various styles and attributes to make changes to the documents as per the user’s needs. Following is an HTML code that shows the use of bgcolor attribute:
HTML
<html ><head> <title>Document</title></head><body bgcolor="lightgreen" > <h1>Hello reader my name is sachin Welcome to GeekforGeeks</h1></body></html> |
Output:
Method 2: Using an Inline style attribute
If we want to change the color of a background of a web page using an inline style attribute, we have to follow the steps which are given below. We can easily change the color of the background from the following code:
HTML
<html ><head> <title>Internal CSS</title> <style> Body { background-color:greenyellow; } </style></head><body> <h1>Welcome to GeeksforGeeks</h1> <h2>We are using the Internal CSS</h2> </body></html> |
Output:
Method 3: Using internal CSS
If we want to change the color of a background of a web page using an internal cascading stylesheet, we have to follow the steps which are given below. We can easily change the background color from the following code:
HTML
<html lang="en"><head> <title>inline style attribute</title></head><body style="background-color:greenyellow"> <h1>Welcome to GeeksforGeeks</h1> <h2>We are using the inline style attribute</h2></body></html> |
Output:
Please Login to comment...