What is the correct HTML for adding a background color

What is the correct HTML for adding a background color?
Table of Contents

Want to know What is the correct HTML for adding a background color? Today I will show you How to add background color in HTML.

There are many ways to add background color in HTML. I will tell you all the ways to add background color in HTML so read till end. 

What is the correct HTML for adding a background color?

HTML is just a skeleton of a website it does not have design it is like a structure so to add design or skin to this skeleton we use CSS which is a styling language for adding color, backgrounds, fonts and more to a website.

So we can use CSS to add background color in HTML elements. There are mainly 3 ways to add CSS to HTML which are:

  • Inline CSS
  • Internal CSS
  • External CSS

I will show you all the ways to add background to HTML elements. So let’s see how to add background color to HTML.

1. Inline CSS

First method is inline css which is adding css inside html elements so to add background to a HTML element we will use the following code.

				
					<div style="background-color:red">
    Hello coders
</div>
				
			

This code will make the div background red you can add this code to any HTML element with whatever background color you want just add the syntax correctly.

2. Internal CSS

Internal CSS is adding css code within the html page inside the <head> tag you need to create a <style> tag and inside that write your css code like this

				
					<head>
    <style>
        div{
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        
    </div>
</body>
				
			

This will make all the divs background color red you can be more specific by giving it a class or a id. This is a little more organised way of writing CSS.

3. External CSS

External CSS is writing code in a seperate .css file you need to create a file with extension .css and You need to put the below css code in your css file

				
					div{
background-color:red;
}
				
			

Now you need to link this file in your HTML page to apply the CSS code to the HTML elements see the below code.

				
					<head>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div>
        
    </div>
</body>
				
			

This will also make the background color of the HTML element red. This is the most suitable and recommended way of adding css to your HTML page.

I have told you all the ways of adding background color to HTML elements. I hope you found what you were looking for and if you want more guides like this do Join our Telegram Channel for future updates you can join here – Join Coderzway Telegram channel.

Here are some more guides you can read:

Thank you for reading, Have a nice day 🙂

Share This Post
Share on facebook
Share on twitter
Share on email
Share on whatsapp

Leave a Reply

Subscribe To Our Newsletter

Get updates and learn from the best

Latest Guides & Articles