In HTML, adding color to text and elements is typically done using CSS. However, there are several approaches to add color directly in HTML, without using CSS.
We will discuss the following approaches to add color without CSS in HTML Elements.
Table of Content
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: Illustration ofaddingd color in HTML without CSS Using Font Tag.
<!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="pink">It is an online learning platform</font>
</h2>
</body>
</html>
|
Output:
Output
Approach 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: Illustration of adding color in HTML without CSS Using JavaScript
<!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:
Output
Approach 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: Illustration ofaddingd color in HTML without CSS using SVG tag with fill attribute.
<!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:
Output
Approach 4: Using Text Color Attribute
The text attribute in the <body> tag sets the default text color for all text within the body of the HTML document.
Syntax
<body text="value">
Example: Illustration of add color in HTML without CSS using Text Color Attribute
<!DOCTYPE html><html>
<head>
<title>Text Attribute Example</title>
</head>
<body text="green">
<h1>Welcome to GeekForGeeks</h1>
<h3>Adding color in HTML without CSS
using Text Color Attribute
</h3>
</body>
</html>
|
Output:
Output
Approach 5: 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: Illustration of adding color in HTML without CSS Using the bgcolor Attribute
<!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