How to Change Background and Text Color in HTML Without CSS

In this article, we are going to cover three ways to change the background color without using CSS.

Sometimes you want to change background or text color in HTML without using the CSS styling,

However, keep in mind that you will never be able to add, remove, or change the background, text color, or other styling without using CSS styling properties.

So the answer is, that changing the background without using CSS is impossible.

Still, If you prefer not to use CSS, then there are some other methods you can use like inline CSS, JavaScript with DOM, and CSS property attributes.

Take a look at the example below, which combines both background and text colors,

For example.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Change Background and Text Color</title>
  </head>
  <body style="background-color: rgb(246, 235, 34)">
    <h1 style="color: blue">Welcome to My Website</h1>
    <p style="color: rgb(255, 0, 0)">
      This is a paragraph with dark green text on a light gray background.
    </p>
  </body>
</html>

The example code above includes <body>, <h1>, and <p> elements. To change the background and text color, add an HTML style attribute to the element and include the background-color property. It allows you to modify or add background and text colors accordingly.

You can also see two more methods listed below.

Method 1: Using JavaScript DOM

Since you all don't want to use CSS, the first method would be to start using JavaScript methods.

Trust me, this is the best way to change background or text color using JavaScript DOM, it is easy to use, takes less code, has a good user experience, is flexible code, is quick for any implementation, etc.

Now how to change the background color with the JS DOM method. Here's how you can do it,

For example, I want to change the background color of the <body>, so in JavaScript, I have to select the <body> using the document,

Example:

index.html

<script>
      document.body
</script>

Once you've selected the <body> Finally, now we need to add a style property and also a background-color property to the <body> element.

Example:

Index.html

<script>
      document.body.style.backgroundColor;
</script>

Finally, add the background color you want.

Example:

index.html

<script>      
    document.body.style.backgroundColor = "lightblue";
</script>

Here is the output:

Here is an entire code:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Change Background Color</title>
  </head>
  <body>
    <h1>Background color is now changed to "Light Blue"</h1>
      document.body.style.backgroundColor = "lightblue";
    </script>
  </body>
</html>

Change Background Onclick using javascript

You can do another thing, like you can create a button and the background color will be changed only once when your button is clicked,

For example:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Change Background Color</title>
</head>
<body>
    <button onclick="changeBgColor()">Change Background Color</button>

    <script>
        function changeBgColor() {
            document.body.style.backgroundColor = "lightblue";
        }
    </script>
</body>
</html>

In this above example:

The button has an on-click function called changeBGColor and when called the changeBGColor function changes the background color of the <body> to "light blue".

Output:

Change background-color in onclick with JavaScript

Method 2: Using HTML Bg-Color Attribute

Second, you can use the HTML background-color attribute to change the background color you need to set an HTML attribute called bg-color directly to your HTML element and then you will be able to add any background to HTML elements,

Take a look at the example below,

For example:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Using bgcolor Attribute</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <table>
      <tr>
        <td bgcolor="lightgreen">This cell has a light green background.</td>
        <td bgcolor="lightcoral">This cell has a light coral background.</td>
      </tr>
    </table>
  </body>
</html>

The code takes the <table> <tr> and two <td> and I have added the HTML attribute Bg-Color directly to both <td> elements with a background color called "light green" and "light coral", now save Let's see the file and output,

Here is an Output:

Method 3: Using Inline CSS

The last method is an inline CSS to change the background color, this method involves CSS so I mentioned it later. The Inline CSS is an easy way to change the background color,

You need to add a style attribute directly to HTML elements and specify the background-color property to set the background color of the element and then you can apply the background color as you wish.

Here is an example:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Inline CSS Background Color</title>
  </head>
  <body>
    <h1 style="background-color: lightblue">
      This header has a light blue background.
    </h1>
    <p style="background-color: lightgreen">
      This paragraph has a light green background.
    </p>
    <div style="background-color: lightcoral; padding: 10px">
      This div has a light coral background and some padding.
    </div>
  </body>
</html>

The above code contains <div>, <p>, and <h1> elements, now to change their background color we need to add a style attribute to each element as you can see above, After that add the background-color property and apply the background color as per your requirement

Here is an Output:

In the image below all elements have different background colors applied.

Here are the top three easiest ways to change the background color of an HTML element using CSS. A bit of CSS is necessary to achieve this, and I hope you'll find these methods useful.

How to change text color in HTML without CSS

Next, we see how to change text color using CSS, similarly, you change the text color too but still, just an example see below,

Let's use the inline CSS method to change the text color, oh, you can also use the JavaScript on-click method to change the background color, however, is an example below,

index.html

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1 style="color: blue;">This is a blue heading</h1>
    <p style="color: green;">This is a green paragraph</p>
    <span style="color: red;">This is red text inside a span</span>
</body>
</html>

To change the color of the text you need to add a style attribute specifically defined to the HTML element you want to change the background color of, then add a color property inside the style attribute and apply the background you want to add. As you can see in the above example.

Output:

This is an inline way to change text color in HTML using CSS.

And, I hope this article will help you to change the background or text color in HTML without using CSS.

Related Posts:

All Comments

No comments yet.