askvity

How Do I Add Background Color in HTML?

Published in HTML Styling 3 mins read

Adding a background color to your HTML is achieved using CSS (Cascading Style Sheets), and there are several ways to do it:

Using Inline CSS

The simplest method is to use inline CSS directly within the HTML element's tag. This approach is best for quick, single-element styling but is less efficient for larger projects.

To apply a background color using inline CSS, add the style attribute to the opening tag of the element you want to modify. Within the style attribute, use the background-color property followed by the desired color value. For example, to set the background of a paragraph to light blue:

<p style="background-color: lightblue;">This paragraph has a light blue background.</p>

Remember to replace "lightblue" with your preferred color name or hexadecimal code (e.g., #FF0000 for red).

Using Internal CSS

For more organized styling, embed your CSS rules within the <style> tag inside the <head> section of your HTML document. This method is ideal for smaller websites where you'll manage your CSS within a single file.

Here's how to set the body's background color to yellow using internal CSS:

<!DOCTYPE html>
<html>
<head>
<title>Background Color Example</title>
<style>
body {
  background-color: yellow;
}
</style>
</head>
<body>
  <p>This page has a yellow background.</p>
</body>
</html>

This method allows you to style multiple elements with a single CSS rule, making it more manageable compared to inline CSS.

Using External CSS

For larger projects, create a separate CSS file (e.g., styles.css) and link it to your HTML document using the <link> tag. This approach promotes code reusability and maintainability, keeping your HTML and CSS separate for better organization.

styles.css:

body {
  background-color: #f0f0f0; /* Light gray background */
}

index.html:

<!DOCTYPE html>
<html>
<head>
<title>Background Color Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This page has a light gray background.</p>
</body>
</html>

This is the most recommended approach for larger projects, as it separates your content from presentation, enhancing maintainability and organization. Multiple HTML pages can then utilize the same stylesheet.

Remember to adjust the color values to your preferences. You can use color names (like "lightblue," "yellow," "red"), hexadecimal codes (#RRGGBB), or RGB values (rgb(R,G,B)). Consult a color picker tool or a color chart online to find specific shades.

Related Articles