Develop Reference

How to remove/reset external css styles with JQ?

I want to reset remove or make initial all the css properties defined in an external css file. I want the solution should also work when I edited/added/removed properties in css file.
So solutions in here don't work.
For example $('div').css('width','');, is not a solution cause it clears the width property in a HARDCODED way.
Also solutions like $('div').attr('style',''); does not work cause I do not use inline styling, also again $('div').removeClass(''); is not a valid solution.
Any answer would be appreciated, thanx.
You can playaround the code here: http://codepen.io/ertugrulmurat/pen/JEhfe
And; How to dynamically remove a stylesheet from the current page is not a solution, another side effect of this is that it removes all styles for all elements, this is not the case wanted

Just use this $('link[rel=stylesheet][href~="external_css_link.css"]').remove(); and remove the link of the css file which you don't want in similar manner you can again add the file
UPDATE
I tested the same in local file system where css is other file and run the same code and found that the style is removed completely and it behave in complete different manner as it working in the online javascript editor jsfiddle or any other because they internally include the css in the page they don't include the an external link thats why
$('link[rel=stylesheet]').remove();
not work here in your sample
in other way it remove the style completely

How can we disable default browser style properties for elements?

Having issue in design on forms and links on a page I created because of the browser style properties. How can I disable it so that no elements in my html page gets affected by the browsers' default style property?
All solutions are welcome. I am using php for development. So all solutions with css, javascript, php etc are welcomed.

You can maybe put !important behind the css you want to overwrite the default style properties?
maybe this solves your solution?

You cannot disable browser default style sheets, just override them by setting properties to specific values. It is common to confuse the two.
This is a decision by browser vendors. They could give a page (scripts on a page) access to the browser’s stylesheet allowing it or parts thereof to be disabled. But they haven’t done that.

There must be a default style for all elements, so you cannot just disable them.
The usual way to handle this issue is adding your desired defaults in a base CSS file, overwriting the browser's defaults.
As #link commented, http://www.cssreset.com/ provides several default styles to be applied as base in your pages.

Please use normalize css :
http://necolas.github.io/normalize.css/
It'll help you.

You need to override browser's default stylesheet. You can do it many ways-
Manually define every elements style
Use any reset.css (You can find many)
Use a basic html startup tamplate, which covers everything you need. You can find one here, It has many options to choose from.
Hope you will love it :-)

Is their a way to add separate CSS and JS files for a particular part of web page

Is there any way to add separate CSS and Javascript files those work for only particular section of a page and don't affect any other part of the page?
I am attempting to add the following to my web page:
http://codecanyon.net/item/sliderjs-js-framework-for-slider-development/full_screen_preview/1617841
When I used it, the CSS and JS files affect my whole web page.
I don't want this to be happened. I want to add a slider without changing my site totally.
Is there any way to get it working without adding all of the slider's CSS and JS code to my webpage?

Its possible to do this using an iframe as a sort of sandbox. But it begs the question, what are you trying to "protect" the page from? If you have name conflicts, you're best fixing those rather than sandboxing the slider.

If you want to have JS and CSS specific to a certain part of a page, and you don't know JS and CSS, the only way is through iframes.
If you've made the CSS yourself, you can just add a prefix to apply it to on certain sections. Not like this:
p {color:pink}
instead, add a prefix, like this:
#menu p {color:pink}
#content p {color:black}
Your JS should only apply to elements based on id, unless your using something like jQuery. If you're using jQuery you can apply changes only to certain elements in the same way as CSS. eg.
Not like this:
jQuery('p').slider();
instead, add a prefix, like this:
jQuery('#content p').slider();

You can use iframes for this. Create a new page with your CSS and JS file included in it and call that page from iframe.

Can i load css from the original file?

Seems like to me there should be an option for that but i can't seem to find it.
This question was asked many times but only workarounds were answered and that's not what i'm looking for.
I am changing my css incode and i want to load the original css back instead of coding it myself, how can that be achived?
I don't wanna reload the entire file, just load some div or class css.

See this post for a solution.
Based on that you can do something like this:
$("#fix").click(function(e) {
e.preventDefault();
$("div").removeAttr("style");
});​
Note: This assumes you are using JQuery to change the styles in the first place
Here is a working example

if you're using jQuery apply
$(selector).removeAttr('style')
to your elements

I want to load the original css back instead of coding it myself
This is not necessary. You are trying to reload a resource that should just continue to exist. Once it's loaded, you don't need to load it again. If you need to override a style, apply a class to it. To revert to original, remove the class. That's how cascading style sheets work.
If there is a particular reason the css needs to be dynamic, you can try loading css into the Document via the DOM (document.createElement("style") etc.), but support for this is a bit sketchy I believe.

if you want to reset the WHOLE style and not only divs' you'd better use the all selector
$('*').removeAttr('style');

dynamically changing position property in css file after d'n'd

hope you can help me, again :)
i want to build a little webbased gui designer. the user can switch into editor-mode and can place the components wherever (s)he wants via drag'n'drop. when (s)he switches back to user-mode i want the position-details in the external css-file to be updated via javascript.
i looked into some examples that sort of do what i want, but i can't seem to figure out, how to get it working.
thnx in advance,
dg

In order to edit external stylesheets with JS you'll need to use the methods listed here : http://www.quirksmode.org/dom/w3c_css.html (see Accessing Stylesheets and Changing Style Sheets). As you can see from PPKs tables, there some significant CSS incompatabilities - this is edge case stuff and I do not know how you would save this generated CSS file.
I would look at posting (possibly with ajax) the values back to the server which generates the new CSS file which is then called by the user-mode page.
In the edit mode I would have all the styles inline (style="...") and then when the page is submitted, enumerate each element's style property to extract the values and use them to build a POST request. Then create the new file on the server.

you want to use jquery... it uses css to select groups of elements and allows you to manipulate the css style on the elements you have selected
lets say you have an div element with the class awesomeDiv:
<div class="awesomeDiv">some content</div>
you can select it using jquery with the following line:
$(".awesomeDiv")
and you can change the css like so:
$(".awesomeDiv").css({'background-color': '#000000', 'width': '250px'});