Style.css of Angular not applying to certain Component

Question

I have a component, when I add the css code to the .css file of that component, it works. But if I move the code to style.css, it's not working.

My html

<div class="content-body mat-elevation-z8">
  <mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="transKey">
      <mat-header-cell *matHeaderCellDef mat-sort-header> trans no </mat-header-cell>
      <mat-cell *matCellDef="let row">
        <a (click)="showDetail(row.url, row.transKey)" >
            {{row.transKey}}
        </a>
        </mat-cell>
    </ng-container>
  </mat-table>
</div>

My CSS

.content-body a {
  cursor: pointer;
  text-decoration: none;
  color:  #4c90c7
}

.content-body a:hover {
  color: #346092;
}

.content-body a:visited {
  text-decoration: none;
  color: #4c90c7
}

However, not all components are not working, below is my file structure. Style.css works on 'dashboard' html, but not 'trans-msg-his-dialog' html. I'm wondering why, if it has something to do with the module.ts of trans-msg.

Can anyone help? Thank you.

File structure :

UPDATE Following StepUp's comment, I checked Chrome Inspector and found following:

'dashboard' which works:

'trans-msg-his-dialog' which is not working:

However, I'm not sure what the first section is, I can't find them in my css. I'm wondering if it has something to do with Bootstrap?

a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;

}

UPDATE2 Computed style is like following, however I can't find 'rgba(0, 0, 0, 0.87)' in any of my css. I also tried to move those a-related css to the bottome of style.css, but no luck.

Answer 1

Try to remove styles from the your.component.css which overlapps in styles declared in styles.css and all global styles should be applied. Or you override your styles in styles.css by declaring new classes which are placed lower than your desired styles.

Some your global styles are not applied because of CSS specifity rule. Read a great article at mdn about CSS speicifity.

Try to avoid using !important keyword by using CSS specifity rules. It's almost never a good idea to use !important.

UPDATE:

Chrome Developer tools shows that CSS properties 'trans-msg-his-dialog' are overridden. It can be seen by struck-through lines at CSS properties.

1. You can see which properties won by clicking Computed style tab:

2. Or try to move these styles to the bottom of style.css file:

   .content-body a {
       cursor: pointer;
       text-decoration: none;
       color:  #4c90c7
   }
   
   .content-body a:hover {
       color: #346092;
   }
   
   .content-body a:visited {
       text-decoration: none;
       color: #4c90c7
   }
   

UPDATE 1:

Now we know that Bootstrap style has too strong selectors and overrides your anchor:

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

We see that if <a> tag does not have href or tabindex attributes, then it will have color: inherit and text-decoration: none;. So try to add href attribute to your anchor tag:

<a href="javascript:;">Button</a>

Answer 2

enter image description here

In case anyone encounters this problem in the future, (link is angular.json file). I have seen that several people say just use !important, but !important can come with bugs. So, I figured this out on my own and decided to reorder the styles in the angular.json file. This put precedence on styles.css over bootstrap. It worked well for me! SIDENOTE: Also, if you are using bootstrap, realize that bootstrap classes come with some styling already, so that may be why you are encountering problems as well. You are using styles.css but bootstrap class still have the styles on them.