How to add color in HTML without CSS ? - Coding

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

Using Font Tag
Using JavaScript
Using SVG tag with fill attribute
Using Text Color Attribute
Using the bgcolor Attribute

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.

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="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

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:

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.

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:

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

HTML

<!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

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

Reffered: https://www.geeksforgeeks.org

HTML

Related
How to Play Single Audio Element at a time in HTML ?
How to Hide Audio Controls in HTML5 ?
How to Play a Small Clip from a Long Video in HTML5?
What does the type attribute specify in the HTML Input Tag?
What does the "href" attribute specify in an anchor tag?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12