leaflet legend how to set styles css in div from typescript code

I try to set a legend on my map. I do not know how to set css styles, the values (grades) are displayed. Where should I put styles? Its angular 5 and typescript.

TS:

createLegend() { let legend = L.control.attribution({position: "topright"});

function getColor(d) {
  return d > 1000 ? '#800026' :
    d > 500  ? '#BD0026' :
      d > 200  ? '#E31A1C' :
        d > 100  ? '#FC4E2A' :
          d > 50   ? '#FD8D3C' :
            d > 20   ? '#FEB24C' :
              d > 10   ? '#FED976' :
                '#FFEDA0';
}
legend.onAdd = function (map) {
  var div = L.DomUtil.create('div', 'info legend'),
    grades = [0, 10, 20, 50, 100, 200, 500, 1000],
    labels = [];

  // loop through our density intervals and generate a label with a colored square for each interval
  for (var i = 0; i < grades.length; i++) {
    div.innerHTML +=
      '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
      grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
  }
  return div;
};
legend.addTo(this.map);
}

CSS (I do not know where to insert)

.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}