Custom Styling

Configuration
1

I started playing around with theming my dash. I have installed card-mod and also tried overriding CSS vars and they both work.

I want more control in styling, so I added a CSS resource for the Lovelace Dashboard. The CSS file is loaded but my styles are not applied. I think I have a problem with CSS selectors.

Can anyone advise me what to do in order to be able to provide some CSS properties to an element in HA Dashboard?

2

I know that the resource file is loaded because I can see it in the Dev Tools’ Source tab and also because, if I put the following CSS for testing:

dispaly {
  display: none;
}

it works, and the body is not displayed. Trying other CSS selectors like below does not work though

paper-icon-item {
  background-color: red;
}

paper-icon-item span {
  color: green;
  font-size: 16px;
}

Would really appreciate if anyone can share some knowledge on this. Is it possible after all?