The global CSS styles in Angular are not being applied to other components as expected

Question

The global CSS styles in Angular are not being applied to other components as expected

Currently utilizing Angular v10, I have a set of CSS styles that are meant to be used across the entire application. To achieve this, I added them to our global styles.css file. However, I'm encountering an issue where the CSS is not being applied to other components. Interestingly, when I place the same CSS in the component-specific CSS files, it works perfectly fine. After some investigation, I found that setting ViewEncapsulation.None on specific components resolved the issue for one component but not others. For reference, here is a link to my angular.json file: angular.json

This situation is something I have never encountered before in any of my previous Angular projects. I am unsure if this could potentially be related to newer versions of Angular or if there is a mistake on my end. Any assistance on this matter would be greatly appreciated!

javascript html css angular typescript

Answer 1

Answer №1

One possible reason for this behavior could be due to CSS specificity.

In simple terms, different selectors have varying levels of specificity. For instance:

If you define the following class in your overall style sheet:

.some-class {
  color: red;
}

And then in a component, you have the following:

button.some-class {
  color: blue;
}

The 'color' property will be overridden by "blue" because the specificity of the CSS selectors in the component is higher than in your global stylesheet.

Explanation

To determine the specificity of a CSS selector, you start with 0 and add:

1000 (for inline style attributes)
100 (for each ID)
10 (for each class, attribute, pseudo-class)
1 (for each HTML element)

For example:

button.class-1.class-2 has a specificity of 1 (1 HTML element) + 20 (2 classes) = 21

#myId.class-1 has a specificity of 100 (1 ID) + 10 (1 class) = 110

Therefore, the latter selector will override all CSS properties declared in the first one.

For a more detailed explanation, refer to the relevant page on w3schools.

Answer 2

One possible reason for this behavior could be due to CSS specificity.

In simple terms, different selectors have varying levels of specificity. For instance:

If you define the following class in your overall style sheet:

.some-class {
  color: red;
}

And then in a component, you have the following:

button.some-class {
  color: blue;
}

The 'color' property will be overridden by "blue" because the specificity of the CSS selectors in the component is higher than in your global stylesheet.

Explanation

To determine the specificity of a CSS selector, you start with 0 and add:

1000 (for inline style attributes)
100 (for each ID)
10 (for each class, attribute, pseudo-class)
1 (for each HTML element)

For example:

button.class-1.class-2 has a specificity of 1 (1 HTML element) + 20 (2 classes) = 21

#myId.class-1 has a specificity of 100 (1 ID) + 10 (1 class) = 110

Therefore, the latter selector will override all CSS properties declared in the first one.

For a more detailed explanation, refer to the relevant page on w3schools.

The global CSS styles in Angular are not being applied to other components as expected

Answer №1

Explanation

Similar questions

Implementing an interactive tab feature using jQuery UI

Sass: Setting a maximum width relative to the parent element's width

Dealing with performance issues in VueJS and Vuetify's data-table component, especially when trying to implement

An issue arose when attempting to submit data from an AngularJS form

Measuring the quantity of 'table' elements with jQuery

"Step-by-step guide on positioning a video in the center over another

The magic of Angular's data binding post-ajax retrieval

Tips for utilizing SeleniumRC within JUnit framework for elements with dynamically changing IDs

Show information based on a specific letter

Unable to retrieve the form from the website

Angular: utilizing a setter method for input manipulation

When the browser window is minimized, the top section of the website becomes concealed

Contrast between utilizing form data versus base64 encoding for transmitting images to a .NET API

Exploring Angular: Understanding Events and Addressing the Error Message "subscribe is not a function"

Issue with displaying jqplot in a jQuery page

Using framer-motion with Next.JS ensures that content remains consistent during navigation

Issue with firestore IN query when encountering NULL value

The footer refuses to adhere to the bottom of the page

Error in Material UI when using the select component

Obtain the key's value from a JSON object that is nested within another