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;
}
Related
I'm building an app with many different components and I've run into an issue where styling from one component has overlapped with styling from another component. Other than giving each paragraph tag it's own class, is there anyway to prevent this? Say with a keyword or something?
Try to use as a specific selector as possible in your CSS file. It isn't just .class or #div. When you find a more specific selector you can always add !important after all your style.
It will have a higher importance level than everything else, but you can still change it from a different file if you use the same level.
This can be something like this:
.some-div > p {
font-size: 16px !important!
}
Please check this https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors for selectors.
I don't think there is any other way than giving unique class to every element.
Let me elaborate:
If you have used a web framework, say NextJs, you will see that it assign a unique class to every element to avoid class collision within page. And Styling IS one of them.
So yeah, Having unique classes IS necessary to avoid css collision, unless you don't go for an ID approach.
I am currently merging functionality of 2-3 open-source projects and am dealing with a couple of large CSS files. To make a long story short, there are a couple of textboxes that are not being styled correctly. Namely, they seem to inherit styles from both libraries.
Hence, I am wondering if there is a Jade or CSS way of disabling all styles on those boxes and then applying only the ones indicated in its class property. That is, somehow I need to make sure that the only thing that are applied are those that are specified within the class property.
Check out this link on 'unset', 'initial', and 'inherit'.
Likewise, check this out as well. There is always the option of using '!important' in your own CSS file to override existing styles.
Hope that helps!
the all property offers the ability to force a reset off all properties, but browser support is limited. Because of the nature of CSS, the element will always inherit any properties that are not overridden. I'm assuming if you are using jade you are also using a css pre-processor, so you can mange some of this by name-spacing your libraries. For example
//sass
.foo {
#import 'bar';
}
//csss
.foo .class-from-bar {...}
.foo .class-from-bar-2 {...}
I am working on a project which is completely done by HTML5,MVC 4,CSS 3, JQuery, LINQ. There are a lot of ui,li and other html controls and we have done styles for those elements.
Now i have a situation that i must include a JQ Grid (http://www.trirand.com/blog/jqgrid/jqgrid.html) , we were using our own client side grid. Now what the problem is if i use the style sheet of the JQ Grid on the page, there is a possibility to get affected to other element also. Anyway i am gonna use that particular grid inside a div element i need that style sheet should be affected to that the elements which all are inside that div.
Is there any possibilities?
(I wonder if this is possible in this way ;)
<div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.css"> my ui elements here </div>
I know its not possible in this way )
NB: editing http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css[^] by adding "jqgridcontainer" div id to all the element css is not possible.
No you can't add css file to one div, you can only add style to the all document.
The only way i see to use css file to only one part of your page is to put your grid in an iframe (which is not really good...)
You can't do <div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.css">. If jqstyles.css is not a big file you can change the div{...} rules in it with div.jq {...} and add class jq to your divs that you want to use jq styles. If jqstyles.css is so big that you can't go through it all, give your divs, which you want to have your style, a class like 'myDivClass' and change your css to div.myDivClass {...}. You may need to mark your rules as !important or just reference jqstyles.css first and your css 2nd..
Use ids and classes properly to avoid all the division to get the same property..
Is it possible to dismiss one .css file for one table or div in the html, and for everything inside that tag.
I made some research but couldnt really find anything...
No, there is no way to exclude any elements from the styles of the page.
To keep the rules from applying, you either need to override each style for those elements, or change the selectors for the rules so that they no longer apply to that element.
In a preprocessor
table * {
//use some reset
//additional overrides if you need too
}
Best solution is to modify your rules, or worst use an iframe :/
Here is a difficulty I am trying to solve. I am working inside a client's page to develop a scroller interface. Basically, I cannot change the doctype, the surrounding elements and the stylesheets or scripts that are already in the client's page and I have to make my little block of code "fit" inside this. This is common for web developers.
The tricky part now is that some img elements inside my block are actually being targeted by a CSS rule inside the inherited client's stylesheet (which, of course, I cannot remove or change). It would be too long to explain why here in this case I actually can't use more specific CSS rules myself to compensate this, but it's a fact. So my question is : is there a way to prevent a HTML element from being targeted by a CSS rule other than creating another rule or deleting the rule? The difficulty is that a rule like
.containter1 .containter3 { ... }
will target an element inside :
<div class="container1">
<div class="containter2">
<div class="containter3">Element
...
Elements inside the page don't make "walls" for CSS rules, which "jump" over containers to target elements. So a rule like
img { ... }
will target any img tag. The only way I know to compensate this is to create a more specific CSS rule targetting the precise img to protect. But I cannot do that here. Is there a way to get the same result without creating a CSS rule, only by adding HTML?
/* EDIT TO CLARIFY */
I know CSS rules, specificity, inheritance, etc. My question was more pragmatic. Consider this example to clarify the problem : imagine you have a client's stylesheet that you can't touch and that defines the following general rule:
img { display:none; }
The problem is that you cannot set a corresponding generic rule to do the opposite, like :
img { display:not-none; }
because there is no such thing as the opposite to none. The opposite of "none" can either be "inline", "block", "inline-block", and so on.
So basically, this means that the first generic rule forces you to explicitly define the display property for each and every img in your page. And that sucks. So I was trying to find a hack to solve situations like this (my actual problem is even worst than this, believe me, but this example is much clearer and quicker to explain).
If you're saying you want to prevent targeting without changing any code, then no, that's obviously not possible.
In-line styles always over-ride style-sheet rules ( unless they're using an !important tag, then you'll need to also use it).
You should be able to reset whatever elements you need, using syntax from your favorite CSS reset. Here are some options:
http://www.cssreset.com/
So, something like -
<div style="border:0 !important;padding:0 !important;margin:0 !important;height:auto;"></div>
is your best bet.
The only way you can change CSS for specific element is modification of existing styleshits or creating new style which is more specific and will overload other styles.
and I have to make my little block of code "fit" inside this.
Once you have make some block of code, you can put style tag inside that block of HTML code like this, for instance:
<div id="block_of_code_available_for_modification">
<style type="text/css">
//css code which will fix styles of your content without influencing other elements on a page.
</style>
</div>
Or, if you have just a few elements you need to fix styles for, you can use style attribute of HTML elements (once you can set modify HTML, you can always add something like below... Well, the same as adding style tag). Priority of css properties inside style attribute is the highest one. Except if there is no !important in some previouse styles:
<img style="any css properties you need" src="..." />
The default display value for an img element is inline-block. If you want to reset the display value for all images, why not use that?
If you've got multiple different types of elements that are being set to weird values, then the problem is maybe a bit more complex as you'd need to consider which elements to set to what display type. But all HTML elements do have well-defined default display types, so it shouldn't be too hard to reset them all.
img {display: inline-block;}
span, a, etc {display:inline;}
div, etc {display:block;}
... etc ...
If it comes down to it, you could just use one of the reset CSS scripts that are available, to set everything back to the correct defaults.
No there is no way you can stop other rules from getting applied on a particular element.
you have to redefine all those rules for that html element so they will overwrite all the other rules.