-1

I seem to be having re-occurring issues with styling individual parts of a wordpress page, but in this case it is the footer HTML code.

In the Footer, I have the following code:

<div id="Footer Shopping Info">
  <div class="Box">
    <div class="Box-Info">
      <div class="Box-Heading">

         <ul class="Shopping-Info-List">
            <h2>Shopping Info</h2>
            <li><a href="http://cutepinkboutique.com/Returns/">Returns</a></li>
            <li><a href="http://cutepinkboutique.com/Returns/">Expected Delivery</a> </li>
        </ul>

      </div>
    </div>
  </div>
</div>

I want to be able to individually style and change H2 with the following code:

.box h2 {
  color: #ff63b1;
}

but the H2 line is not turning pink. Why is this?

I seemed to be having this alot lately, and I know that its pulling from a global element. How can I box off code so that I can change things individually?

XYZ
  • 4,450
  • 2
  • 15
  • 31
Charlie Marsh
  • 59
  • 1
  • 7
  • This question is off-topic because it's a "simple typographical error". I'm marking it as duplicate as the other question has quite important remarks and documentation about the error. As in using white-spaces in an element ID. – brasofilo May 13 '17 at 18:38

1 Answers1

1

Dear .box is not the same as .Box these are two different classes when using css it is always best practice to use small letters.

so just change <div class="Box"> to <div class="box">

Mhd Alaa Alhaj
  • 2,438
  • 1
  • 11
  • 18