How to Change Background Color in HTML? C# Examples

In this article, we will use C# examples to show different ways to change background color in HTML files using Aspose.HTML class library.

To change the background color on a web page is easy with the CSS background-color property. There are a few ways you can set this property value. You can use inline, internal or external CSS, and HTML color values may be specified as the standard color names or with HEX, RGB, RGBA, HSL, and HSLA values. In the examples below, we’ll use HEX and RGB color codes because they’re the most used.

For more information on how to use HTML color codes, please visit the HTML Color Codes article. In the Background Color section, you find out HTML code examples of how to change the background color.

Change Background Color of Specific Element

To change background color for HTML element using Aspose.HTML API you should follow a few steps:

Load an existing HTML file.
Determine which element you want to change the background color for and find this element to set a style attribute for it. Use the GetElementsByTagName(name) method of the Element class that returns HTML element with a given tag name.
Set the style attribute with background-color property: use the Style property of the HTMLElement class.
Save the modified HTML document.

You can set or change background color for various HTML elements such as <p>, <h1>…<h6>, <div> or <table>. The following C# example shows the background color change for the first <p>element:

C# example

 1using Aspose.Html;
 2using System.IO;
 3...
 4
 5    // Prepare output path for document saving
 6    string savePath = Path.Combine(OutputDir, "change-background-color-p-inline-css.html");
 7
 8    // Prepare path to source HTML file
 9    string documentPath = Path.Combine(DataDir, "file.html");
10
11    // Create an instance of an HTML document
12    var document = new HTMLDocument(documentPath);
13
14    // Find the first paragraph element to set a style attribute
15    var paragraph = (HTMLElement)document.GetElementsByTagName("p").First();
16    
17    // Set the style attribute with background-color property
18    paragraph.Style.BackgroundColor = "#e5f3fd";
19
20    // Save the HTML document to a file
21    document.Save(Path.Combine(savePath));

JavaScript code

1<script>
2	// Find the paragraph element to set a style attribute
3	var paragraph = document.getElementsByTagName("p")[0];
4
5	// Set the style attribute with background-color property
6	paragraph.style.backgroundColor = "#e5f3fd";
7</script>

The figure illustrates the results of changing background color for the first paragraph in the HTML file using inline CSS:

Text “Rendered the change-background-color-p-inline-css.html with changed background color for the first paragraph”

Change Background Color of the Entire Web Page

You can change the background color using inline style attribute or using internal CSS.

Change Background Color Using Inline CSS

If you want to change the color of the entire HTML document, you should use the background-color property of the style attribute in the opening tag of the <body> section.

C# example

 1using Aspose.Html;
 2using System.IO;
 3...
 4
 5    // Prepare output path for document saving
 6    string savePath = Path.Combine(OutputDir, "change-background-color-inline-css.html");
 7
 8    // Prepare path to source HTML file
 9    string documentPath = Path.Combine(DataDir, "file.html");
10
11    // Create an instance of an HTML document
12    var document = new HTMLDocument(documentPath);
13
14    // Find the body element to set a style attribute
15    var body = (HTMLElement)document.GetElementsByTagName("body").First();
16
17    // Set the style attribute with background-color property
18    body.Style.BackgroundColor = "#e5f3fd";
19
20    // Save the HTML document to a file
21    document.Save(Path.Combine(savePath));

JavaScript code

1<script>
2	// Find the body element to set a style attribute
3	var body = document.getElementsByTagName("body")[0];
4
5	// Set style attribute with background-color property
6	body.style.backgroundColor = "#e5f3fd";
7</script>

You can download the complete examples and data files from GitHub.

Change Background Color Using Internal CSS

The same background colorization result can be achieved using internal CSS, as shown in the following HTML code example:

1<head>
2<style>
3	body {
4	background-color: rgb(229, 243, 253);
5	}
6</style>
7</head>

Note: Keep in mind, that the usage of a style attribute overrides any style set in the HTML <style> tag or external style sheet.

The next C# example demonstrates how to realize internal CSS to change background color for a whole HTML file. Take a few steps:

Load an existing HTML file.
Find the <body> element and remove the background-color property from the style attribute. Note: If the background color is set using inline style attribute, this step is required because using the style attribute overrides both internal and external CSS.
Create a <style> element and assign the background-color value for <body> element.
Find the <head> element in your document and add the <style> element into it.
Save the modified HTML document.

C# example

 1using Aspose.Html;
 2using System.IO;
 3...
 4
 5    // Prepare output path for document saving
 6    string savePath = Path.Combine(OutputDir, "change-background-color-internal-css.html");
 7
 8    // Prepare path to source HTML file
 9    string documentPath = Path.Combine(DataDir, "file.html");
10
11    // Create an instance of an HTML document
12    var document = new HTMLDocument(documentPath);
13
14    // Find the body element
15    var body = (HTMLElement)document.GetElementsByTagName("body").First();
16
17    // Remove the background-color property from the style attribute
18    body.Style.RemoveProperty("background-color");
19
20    // Create a style element and assign the background-color value for body element
21    var style = document.CreateElement("style");
22    style.TextContent = "body { background-color: rgb(229, 243, 253) }";
23
24    // Find the document head element and append style element to the head
25    var head = document.GetElementsByTagName("head").First();
26    head.AppendChild(style);
27
28    // Save the HTML document
29    document.Save(Path.Combine(savePath));

JavaScript code

 1<script>
 2	// Find the body element
 3	var body = document.getElementsByTagName("body")[0];
 4
 5	// Remove the background-color property from style attribute
 6	body.style.removeProperty("background-color");
 7
 8	// Create a style element and assign the background-color value for body element
 9	var style = document.createElement("style");
10	style.textContent = "body { background-color: rgb(229, 243, 253) }";
11
12	// Find the document head element and append style element to the head
13	var head = document.getElementsByTagName("head")[0];
14	head.appendChild(style);
15</script>

The figure shows two fragments of the HTML file before (a) and after (b) changing the background color for the entire document:

Text “Two fragments of the HTML document before and after changing the background color.”

Aspose.HTML offers free HTML Web Applications that are an online collection of converters, mergers, SEO tools, HTML code generators, URL tools, and more. The applications work on any operating system with a web browser and do not require any additional software installation. It’s a fast and easy way to efficiently and effectively solve your HTML-related tasks.

How to Change Text Color How to Change Border Color