新课程不起作用，但旧课程工作得很好

Question

When I create a new class and try to use it, it does not work. Here is the CSS I am using:

/* NEW */
.Test {
    color:purple;
}
/* OLD */
.TitleFont {
    font-family: MiriamLibre-Regular;
    color: white;
    margin-left: auto;
    margin-right: auto;
    width: 8em;
}

As you can see, the class commented NEW is one one I just created, and the one commented OLD is the one I had created a while ago. I can use the new class with a h1 tag like this:

<h1 class="Test">This is a test.</h1>

When I go to the page it does not show the purple it was supposed to show. (It does the same for anything, I just put color:purple; as an example)

Here is an image of it not working.

I can replace the class used in the HTML with the old class like this:

<h1 class="TitleFont">This is a test.</h1>

And it works perfectly fine. (All my other classes from a while ago work fine too.)

You can see it working here.

How can I fix this?

Answer 1

In HTML, you have this:

<h1 class="Test">

So the class you use there is .test

But your CSS rule looks like this:

.TestClass {
    color:purple;
}

That's for a class named .TestClass (which you don't use in your HTML code...)