Applying different styles to header and footer on the same page

Ionic Framework ionic-v3
1

Hi,

I’m having difficulty targeting specific instances of toolbars to change their css styles (I’m a beginner). Specifically in this case I would like to change the background color of the footer differently to the header. The code I currently have changes both.



**HTML**

<ion-header>
  <ion-navbar>
    <ion-title class="vertical-align-content">
      <img alt="logo" height="40" src="assets/titleLogo.png">
      &nbsp;
      Saved Items
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="addItem()">
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-footer>
  <ion-toolbar>
    <div style="text-align: center">
      <button ion-button color="secondary" outline icon-left>
        <ion-icon name='trash' is-active="false"></ion-icon>
        Delete all
      </button>
    </div>
  </ion-toolbar>
</ion-footer>


**css:**

.toolbar-background {
    background-color: #5381A7 !important;
  }