ag-grid header background

<html>
<head>
    <script src="https://unpkg.com/ag-grid-community@22.1.1/dist/ag-grid-community.min.js"></script>
    <script src="grid.js"></script>
    <link rel="stylesheet" type="text/css" href="grid.css">
</head>
<body>
    <div id="myGrid" style="height: 300px" class="ag-theme-balham"></div>
</body>
</html>

var columnDefs = [
    {headerName: "Make", field: "make", headerClass: 'header-black'},
    {headerName: "Model", field: "model", headerClass: 'header-black'},
    {headerName: "Price", field: "price", headerClass: 'header-green'}
];

var rowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData
};

document.addEventListener("DOMContentLoaded", function() {
    var grid = document.querySelector('#myGrid');
    new agGrid.Grid(grid, gridOptions);
});

.header-black {
  background-color: black;
  color: white;
}

.header-green {
  background-color: green;
  color: white;
}