How to change background color in HTML
Understanding the Basics
Before we delve deeper, let's set the stage by understanding a few key concepts.
HTML: HTML, or Hypertext Markup Language, is the standard language for creating web pages. It's like the skeleton of a website - it provides structure and arranges the elements on the webpage.
CSS: CSS, or Cascading Style Sheets, is a styling language used for describing the look and formatting of a document written in HTML. Think of it as the skin and clothing that give a look and feel to the HTML skeleton.
Element: In HTML, an element is an individual component of a web page or web application. It can be either visible or invisible to the viewer. Elements are represented by tags.
Tag: A tag represents an HTML element. Tags are usually paired (an opening tag and a closing tag) and often contain other elements between them.
Attribute: Attributes provide additional information about an element. They are always specified in the start tag.
With this basic understanding, let's proceed to the main topic of changing the background color in HTML.
Changing Background Color Using HTML 'body' Tag
The most straightforward way to change the background color of a webpage is by using the 'body' tag in HTML. The 'bgcolor' attribute of the 'body' tag is used to change the background color.
Here's an example:
<body bgcolor="yellow">
<h1>Welcome to my website!</h1>
<p>Enjoy your stay.</p>
</body>
In this example, the 'bgcolor' attribute is set to "yellow". Therefore, the background color of the webpage will be yellow.
Note: The 'bgcolor' attribute is not supported in HTML5. Therefore, it's better to use CSS to change the background color, as explained in the next section.
Changing Background Color Using CSS
CSS is more versatile and recommended for changing the background color. There are two main ways to apply CSS - Inline and External.
Inline CSS
Inline CSS is when you apply the CSS rules directly into the HTML tags using the 'style' attribute. Here's how you can change the background color using inline CSS:
<body style="background-color: yellow;">
<h1>Welcome to my website!</h1>
<p>Enjoy your stay.</p>
</body>
In this example, the 'style' attribute is used inside the 'body' tag to change the background color to yellow.
External CSS
External CSS is when you create a separate .css file and link it to your HTML document. This is the most efficient way to apply CSS, especially for larger websites. Here's how you can do it:
First, create a CSS file (let's call it 'styles.css') and add the following CSS rule:
body {
background-color: yellow;
}
Then, link this CSS file to your HTML document using the 'link' tag:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to my website!</h1>
<p>Enjoy your stay.</p>
</body>
</html>
With this, the background color of your webpage would be set to yellow.
Understanding Color Values
In the examples above, we used the color name "yellow" to set the background color. However, CSS supports several methods for specifying color values:
Color Names: There are 140 standard color names that are recognized by all modern browsers, like "yellow", "red", "blue", etc.
Hexadecimal Colors: Hexadecimal color values are specified using the format "#RRGGBB", where RR (red), GG (green), and BB (blue) are hexadecimal values between 00 and FF. For example, "#FFFF00" is yellow.
RGB Colors: RGB color values are specified using the format "rgb(red, green, blue)", where red, green, and blue are values between 0 and 255. For example, "rgb(255, 255, 0)" is yellow.
Here's how you can use hexadecimal and RGB values to set the background color:
<body style="background-color: #FFFF00;"> <!-- Using Hexadecimal -->
<body style="background-color: rgb(255, 255, 0);"> <!-- Using RGB -->
Conclusion
Changing the background color in HTML is quite straightforward, whether you're doing it directly via the 'body' tag in HTML or more flexibly via CSS. Remember, while the 'bgcolor' attribute in HTML can be handy, it's not supported in HTML5, and therefore, using CSS is the more modern and recommended approach.
Happy coding!