How to prevent attributes inside a div to use css of project - html

I would like to add a custom style or CSS to my Angular website elements without accessing the styles on the server or in another word how can I prevent the automatic access from global classes.
For example
<p>Something</p>
for the whole project the common CSS has been used. How can I prevent in order to use custom CSS. I am using it in Angular by having div with inner HTML styles.

Related

Applying ngStyle to all p tags within an html page

I am currently writing code for an Angular project that changes color dynamically based on the user selecting a theme. When a theme is selected it grabs from an api the hex code for the desired color to theme the app in, which for this I want to apply the theme color to all text. Currently I can apply it individually to each p tag through ngStyle by typing it as
<p [ngStyle]="{'color': api.color}"> , though I want to be able to apply it to all instance of the p tag without repeating it for each of them.
You can add Angular Global CSS file to apply global style. Here are the references:
Angular Global CSS styles
angular-cli how to add global styles?

How to make reset.css not apply inside 1 element?

I want to do this because I get stylized text from "Portable Text to React". However my index.css (global style)
which has a css reset, removes all the default styling from elements of the portable text.
How can I exclude the reset.css from this 1 react component (or solve this in another way you know) ? Adding .unset * {all: unset} or .unset * {all: unset} class does not create the behaviour I want. It removes all styling instead of re-giving the styling to h1s, spans, lists etc.
In here what you can do is, you need to separate your styles for different components. Normally don't use global css to add styles to jsx code.There are couple of ways to add separate css for your component. In here what it does is, these styles are targeting only for selected components.
Option one -use module.css file.
in here you can add css classes only inside the module.css file.(dont use id selectors inside here).Read this reference, you can get full idea about this.click here
option two -use third party library like styled component.
this doc explain clearly what need to do and have many examples to get idea.click here to navigate the doc
Solved: Give this class to the element. revert behaves exactly the way I want. Returns all elements inside this one element to browser default styling, while my css reset remains active on rest of the application. I don't know if there are any drawbacks.
.unset * {
all: revert;
}

Editing CSS for PrimeNG Components

I am currently developing a user interface using Angular 4, Angular Materials and PrimeNG components.
The latest component I am battling with is the MultiSelect Component from PrimeNG:
https://www.primefaces.org/primeng/#/multiselect
I am simply just trying to make the component's width fit 100% of the parent component.
Is there a specific process I need to follow to edit CSS classes for this component? The documentation says to use "Style" for inline - does this mean:
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100%;"></p-multiSelect>
Because this did not work.
It also says to use "styleClass" as a property to add a styling CSS class. How do you use this?
Lastly, they provide a list of the CSS classes the PrimeNG component uses on the website (e.g. ui-multiselect). When I attempt to modify 'ui-multiselect' by declaring it within the Angular components CSS, it still doesn't work.
Any ideas? What am I doing wrong?
For inline PrimeNG styling, use something like this:
[style]="{'width': '100%'}"
To use styleClass simply add:
styleClass="example-css-class"
This way, for example, you can style multi select input field with many different style classes, eg. Bootstrap's form-control.
When you operate with PrimeNG ui's, be sure to put them into components .css. If you use global styles.css, you'll have to override the PrimeNG files in .angular-cli.json. You can do it by editing styles array like this:
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"styles.css"
When the styles.css are put after the primeng resources, it is loaded after the primeng's, which will override the styles.

Resolving CSS namespaces in HTML

I'm a web-dev newbie and I'm working on a webapp which displays html from other sources.
The main webapp is based on bootstrap and the other external html is embedded in a bootstrap modal. I want the modal content to look exactly like they would if they were a separate html page. Since the embedded html can contain elements that have been bootstrap stylized, any td, tr or table contained within the external html are stylized as well.
Is there a way to tell html something like "Within this div, don't use bootstrap styles?"
As an aside, since this is an internal framework and will be used by a few people, I'm not worried about xss exploits.
I don't know if I interpreted your question correctly. But I understand you want to make a div (or whatever element) not have bootstrap styles. You can then, override those styles using your own CSS stylesheet, applying new styles to that element along with the !important rule.
One solution is to prefix all bootstrap clases with something like .bt so the declarations ends up like:
.bt table
.bt input
.bt td
then to the main div (or body) of the site using bootstrap, add the bt class like <div class="bt">

Reset css style for a div content

There is a html page customized with css styles(I cannot change this css). One tag of this page designed as a container for dynamic html data. How can I "reset" css settings for this div(css styles defined in the page have no influence on the content of this div)?
I have access only to dynamic html and I can add more css styles to a page.
If I understand you correctly the problem you have having is that the CSS for the main page is affecting the CSS for your "dynamic" div. For the most part there is nothing you can do about that, other than specifying higher-priority styles to the dynamic content you are loading.
You can do this by doing in-line css, or by doing other more specific CSS declarations in a file or tags.
The answer is not to "reset" the styles, but rather to SET the styles you want on the div, to override whatever the page styles throw at you. In your situation you'll need to either edit the style attribute, or modify the javascript style properties.