How to change P tags text color inside a div?

user_12313380 0
Viewed 55

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

css html
2 Answers

.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>

user_135448490

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>

user_165130010
Related