CSS color code not working

#css #color #run #errors

I can not get the background or text to change colors. I am using HTML and CSS. The javascript and margins structures work. When I run it, Notepad++ says: Syntax error line: 1, pos:1 and [null] line: 9, pos:4. I am using chrome and tried firefox. Here is my code:<!DOCTYPE html>

My First Web Page

<br>
Body{ </p>
<div class="highlight"><pre class="highlight plaintext"><code> color:blue;

</style>
<script>
function myFunction() {
var x = document.getElementById ("fname");
x.value = x.value.toUpperCase();
}
</script>
</code></pre></div>
<p></head></p>

<p><body><br>
This is a Sample HtmL Document.<br>
This Javascript function will capitalize my name:<br>
Enter your name: <input type="text" id="fname" onchange="myFunction()"><br>
</body><br>
</html></p>

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (4)

Connor Van Etten • Apr 6 '23 • Edited

Hi! It is a little hard to view your code from your post, but I think you have syntax errors within your html structure. To make your code post a little more readable in the future try using markdown syntax as it can help clean up the formatting a lot!

Given the base code you provided, I edited it to run properly. I used Internal CSS, which is embedding the CSS inside your head tag above for the file to add styling. Feel free to change the color (text color) and background-color to whatever you would like!

Anyways here's a working implementation of the code above. Feel free to ask questions about it if you need assistance! Happy Coding!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TITLE</title>

    <!-- If you use VS Code to write html , try typing `html:5` and 
    hit enter on a empty file. It will create a nice starting template -->
    <!-- Here is your internal CSS as opposed to inline or external CSS -->
    <style>
      body {
        color: aqua;
        background-color: bisque;
      }
    </style>

  </head>

  <body>
        <h1>My First Web Page</h1>

        <p>
        This is a Sample HtmL Document.<br />
        This Javascript function will capitalize my name:<br />
        Enter your name:
        <input type="text" id="fname" onchange="myFunction()" /><br />
        </p>


      <script>
        function myFunction() {
          var x = document.getElementById("fname");
          x.value = x.value.toUpperCase();
        }
      </script>
    </p>
  </body>
</html>

mav044 • Apr 6 '23

Thank you. The "syntax" link isn't working. Sorry about the messy structure. It still does not change colors. I tried firefox, EI, and Chrome. (I put CHROME=1). I'm using Notepad++.

Connor Van Etten • Apr 8 '23

No worries, I believe the link should be working now! I repasted it and edited the reply previously. As for the code above, I tested it on my machine using chrome, opera and edge, just to be safe, which all give me the image below! I selected random colors for the background (bisque) and text (aqua) but be feel to edit them.

As I am not a native user of Notepad++ the issue might lie within there if you are trying to run the file directly from that IDE/Text Editor. But by right-clicking the file name, then selecting open-into and then selecting default viewer I was able to get the webpage to load in my Opera Browser (my default browser). Also note the on lines 4-6, the meta tags are not innately required for the code to run, feel free to remove them if you think they may cause the issue!