'How to change P tags text color inside a div?

I want to change the P tags text color of the card-header section but it is not working for some unknown reason

dashboard.html

  <div class="container">
    <div class="card">
      <div class="card-header">
        <p>Account: 2002384</p>
      </div>
      <div class="card-body">
        <div class="row my-auto">
        <p>Balance: $44,930.20</p>
      </div>
      </div>
    </div>

styledashboard.css

.card-header{
     color: #0c5460;
}

.card-header p{
     color: #0c5460;
}


.card-header .p{
     color: #0c5460;
}

p .card-header{
     color: #0c5460;
}

None of them work

htmlcss


Solution 1:[1]

.card-header p {
     color: #0c5460;
}

.card-body p {
      color: red;
}
 <div class="container">
    <div class="card">
      <div class="card-header">
        <p>Account: 2002384</p>
      </div>
      <div class="card-body">
        <div class="row my-auto">
        <p>Balance: $44,930.20</p>
      </div>
      </div>
    </div>

Solution 2:[2]

Edit your css to something like this.

.card > p{
     color: #0c5460;
}

.card > span {
     color: #0c5460;
}

.row > p { 
    color: #0c5460;
 }
 <div class="container">
    <div class="card">
      <p>Account: 2002384</p>
        <span>Account: 2002384</span>
      </div>
      <div class="card-body">
        <div class="row my-auto">
        <p>Balance: $44,930.20</p>
      </div>
      </div>
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Evren
Solution 2 Crystal

Related Questions