How to add color in HTML without CSS ?
Last Updated :
04 Jul, 2025
In HTML, adding color to text and elements is most commonly done using CSS, which provides greater control and cleaner separation of style from structure. However, there are still a few ways to add color directly within HTML, without relying on CSS. These methods are generally considered outdated but can be useful for simple or legacy projects.
In this article, we will explore several approaches to apply color directly in HTML—without using external or internal CSS. It's worth noting that over 90% of modern websites now use CSS for styling, as it offers better maintainability, consistency, and accessibility.
Approach 1: Using Font Tag
Use <font> tag to specify the color of text within the tag. In font tags, we have to use color attributes to provide color names or codes.
Syntax
<font color="value">
Example 1: Illustration of adding color in HTML without CSS Using Font Tag.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Adding color in HTML without CSS</title>
</head>
<body>
<h3>Using font tag with color attribute</h3>
<h1>
<font color="green">Welcome to GeekForGeeks </font>
</h1>
<h2>
<font color="blue">It is an online learning platform</font>
</h2>
</body>
</html>
Output:
OutputApproach 2: Using JavaScript
Define a JavaScript function called changeColor that is used to change the color of an HTML element with the id "myElement". Here we used <script> tagto add javascript code in HTML.
Syntax
<script>
<!-- javascript body -->
</script>
Example 2: Illustration of adding color in HTML without CSS Using JavaScript
index.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
function changeColor() {
var element = document.getElementById("myElement");
element.style.color = "green";
}
</script>
</head>
<body onload="changeColor()">
<h1 id="myElement">Using javascript to change color of this text</h1>
</body>
</html>
Output:
OutputApproach 3: Using SVG tag with fill attribute
SVG tag allows us to create shapes or text in HTML along witha fill attribute which is used to assign the color to that shape or text. In the below example we have created some shapes with different colors.
Syntax
<svg width="value" height="value">
<tag fill="value">Text or Shape</tag>
</svg>
Example 3: Illustration of adding color in HTML without CSS using SVG tag with fill attribute.
index.html
<!DOCTYPE html>
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<h3>Using SVG</h3>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" fill="blue" />
</svg>
<svg width="100" height="100">
<ellipse cx="50" cy="50" rx="40" ry="20" fill="green" />
</svg>
<svg width="100" height="100">
<polygon points="50,10 90,90 10,90" fill="yellow" />
</svg>
</body>
</html>
Output:
OutputApproach 4: Using the bgcolor Attribute
The bgcolor attribute is used to setthe background color ofan element or entire page. Use the attribute inside the <body> tag.
Syntax
<body bgcolor="value">
Example 4: Illustration of adding color in HTML without CSS Using the bgcolor Attribute
index.html
<!DOCTYPE html>
<html>
<head>
<title>Adding color in HTML without CSS</title>
</head>
<body bgcolor="yellow">
<h3>Add color in HTML without CSS
using the bgcolor Attribute
</h3>
<h1>GeekForGeeks is the best learning platform</h1>
</body>
</html>
Output:
Output
Approach 5: Using the text attribute in <body>
The text attribute of the <body> tag was traditionally used in HTML to set the color of all the text within the body of the webpage. By assigning a color name, hexadecimal value, or RGB value to the text attribute, you can change the default text color of the entire page.
Syntax
<body text="blue"> <h2> This Text is Blue</h2>
Example 5: Illustration of adding color in HTML Text without CSS
index.html
<!DOCTYPE html>
<html>
<head>
<title>Using text Attribute in HTML</title>
</head>
<body text="green">
<h1>Welcome to GeeksForGeeks Web Page</h1>
<p>This text will appear green using the <code>text</code> attribute in the <code><body></code> tag.</p>
<p>This method is deprecated in modern HTML but may still work in some browsers.</p>
</body>
</html>
Output:
Output
Note: Although this method is deprecated in HTML5 and no longer recommended for modern development, it still works in many browsers and can be useful for understanding how early HTML handled styling.
Similar Reads
How to Change Background Color in HTML without CSS ? In HTML, you can change the background color of an element using the bgcolor attribute. However, it's important to note that the bgcolor attribute is deprecated in HTML5 and should be avoided in favor of using CSS for styling. This article will cover various methods to change the background color of
2 min read
How to Link a CSS to HTML? To apply custom styles to your HTML webpage, it's best practice to keep your CSS code in a separate file. In fact, over 90% of modern websites follow this approach for better organization and maintainability. Simply create a CSS file (e.g., styles.css) and write your styling rules in it. Then, use t
4 min read
How To Add Opacity To A Color in CSS? To add opacity to a color in CSS, you can use the rgba() function, which stands for red, green, blue, and alpha (opacity). The rgba() function allows you to specify the opacity of a color by adding a fourth parameter called the "alpha channel." The alpha value ranges from 0 (completely transparent)
3 min read
How To Add Border In HTML? Adding Borders to HTML elements is a common way to enhance the presentation and layout of web pages. Borders can be added to divs, paragraphs, images, and tables to separate or highlight content visually. CSS can provide several properties to customize the borders, such as color, style, and width.Th
4 min read
How to Change Font Color in HTML? We can use <font> tag to change the text color in HTML. This tag was used in older versions of HTML but is deprecated in HTML5. So we can use inline CSS as the best and quickest way to change the font color. 1. Change Font Color using <Font> tagThe <font> tag was used to change tex
2 min read
How to add color picker in a form using HTML ? In this article, we will learn how to add a color picker in a form using HTML. As we know, a color picker is also known as a color-chooser. It is an interface in which a user can select a single color from multiple collections of background colors. When we submitted the color, the browser convert it
1 min read