How can I make it so only this `mat-card-subtitle`

Question

I learn Angular material and I have this code

  <mat-card-header>
    <mat-card-title>Search for books</mat-card-title>
    <mat-card-subtitle>press enter on search</mat-card-subtitle>
  </mat-card-header>

and this css

.mat-card-subtitle {
  font-size: 10px;
  color: red;
}

The problem is now all <mat-card-subtitle> gets the color red. How can I make it so only the mat-card-subtitle in this above header gets color red?

Answer 1

Add a custom CSS class in HTML

  <mat-card-header>
    <mat-card-title>Search for books</mat-card-title>
    <mat-card-subtitle class="red-text">press enter on search</mat-card-subtitle>
  </mat-card-header>

CSS

.red-text {
  font-size: 10px;
  color: red !important;
  text-align: center !important;
}

Answer 2

Add a class to the mat-card-subtitle and give color to particular class

.classname{color:red}