We Keep Coding

While Loading my site on the client's web page there occurs css property clash issues

When i load my Website in the client's url, there occurs a error which takes the css property from the client's css and changed in our css which affects my site.
Is there is any way to write all the property and value in my class so that it will not take from the client's css?

In cases where both stylesheets style the same properties but the wrong stylesheet is winning out (e.g. you have p {border: 1px solid green; color: blue} and the client css has p {border: 1px solid red} and the tables are getting a red border):
If possible, tweak your css to avoid the conflict. This may also require tweaking your markup. For example, if your css and the client's css provides styles for a class called .myclass, you could rename yours to .mynewclass.
You may also be able to get around this by increasing the specificity of your styles. For example, if .myclass is styled in the client css, your css could style body .myclass. For more on specificity, see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
There's always !important (e.g. .myclass {border-color: green !important}) which may make your styles win over the client's. Keep in mind that using a lot of !important is generally considered a sign of bad CSS.
In cases where the client stylesheet is styling a property you want left at the default (e.g. you want borderless divs, but the client css specifies p {border: 1px solid red}) you'll have to add an override: p {border: 0;}.
If you can wrap all your markup in an overriding class, you can do something like
/* client's styles */
p {
border: 1px solid blue
}
/* your styles */
.reset p {
border: 0;
}
<p>client (border)</p>
<div class="reset">
<p>you (no border)</p>
</div>
Or maybe everything you add to the site is always inside the same element, like .main. In that case, in the above example you could style .main p.
If using a wrapper won't work, you can always add a reset class to every one of your elements. That will be a hassle, but it'll work:
/* client's styles */
p {
border: 1px solid blue
}
/* your styles */
p.reset {
border: 0;
}
<p>client (border)</p>
<p class="reset">you (no border)</p>
If you do a bunch of work with this client, it could be worth developing a "reset.css" with all your reset rules.

Do you have the style-loader in your css loader? Look into the rendered DOM and compare the position from the client-css and your react-css. I suspect the react css is inserted as a style tag before the client-css link tag.
Use the extract-text-plugin to generate a separat css file, which you can insert into your DOM after the client's css by hand.

remove the inherited CSS value?

I'm trying to remove the value of an inherited CSS property using Jquery.
.class1 #id1 div.class2 input.class-input{
border-color: #bbb3b9 #c7c1c6 #c7c1c6;
}
Anyone tell me how to remove this "border-color".
Thank.

Create a new class for example
.new_class{
border-color: #00ffdd !important;
}
!important does the trick!
Check this

You can use jQuery, but you'll have to assign a value to the border-color property. You can use transparent though:
$('.class-input').css('border-color', 'transparent');
Edit: Or you can disable the whole border:
$('.class-input').css('border', 'none');

You can either swap the on your div to change the color, or set the border color to empty using
$(".class1").css("border-color", "");
But I would recommend swapping out the class using the removeClass and addClass JQuery functions.

If you still want to keep the width of the border:
border-color: transparent;
If you want to remove the border all together
border: 0;
Edit: border: none; will give your the same result
So your jquery could look something like this:
$(".class-input").css("border","0");
However I would suggest using CSS if you don't need to make it animated. Since you raised the concern about .class1 #id1 div.class2 input.class-input.myclass (I'm assuming that's what you mean since you wouldn't be throwing a div into an input box.
You can use the CSS pseudo-selector :not
.class1 #id1 div.class2 input.class-input:not(.my-class){
border: 0;
}

The simplest way to handle this is to add another reference to give your override code a higher specificity.
.class1 #id1 div.class2 input.class-input [#MyNewID]{
border: none;
}
This removes the border for the area where you have added the ID so that if you are using this same format in other pages you can add an additional ID on the element on the page where you want the border to "disappear"
Please don't use !important this is a lazy way to override code and is not necessary 95% of the time. It will also cause you problem later when you are trying to change this if you are pushing down site wide skins.

Calling a css rule from javascript

Hi all I was wondering if it is possible through javascript to turn a .png that is accessed through css into a clickable link by call that css rule.
.calendar {
background: transparent url("../cal_icon.png") no-repeat 94px 3px;
background-repeat: no-repeat;
margin-right: 2px;
}
This is my css rule that I would like to make my cal_icon.png clickable.
Is this possible?
Please forgive my ignorance in this matter.

As said in comments, you need to add click handler to the element, and css is just for styling
you can take a look at this fiddle, which uses jQuery (onLoad) http://jsfiddle.net/tq92z/
$('.calendar').click(function(){
$(this).css('color','red');
})
there is a css expressions for IE, maybe something else for other browsers (but i can't remember anything now)
http://www.richnetapps.com/using_javascript_expressions_in_css/
but it's not a common practice to do dom manipulations with css

toggleClass/addClass doesn't work with input

I have an input element:
<input id="box" type="text" />
And the following CSS class:
.box-change
{
border-color:#ffffff;
}
As well as the following jQuery code:
$('#box').toggleClass('box-change');
However, it doesn't change the border color as I expect it to. Does anyone know why?
Edit:
The input already has a style, it is thus:
#box
{
border-color:#ff0000;
border-style:solid;
border-bottom-width:1px;
border-left-width:1px;
border-top-width:1px;
}

If you've originally removed border, then you'll have to set
border-width
and
border-style
So in short your CSS should look like:
.box-change
{
border: 1px solid #fff;
}
But it all depends what your initial style is, what colour is background of the containing element of your input etc...
Edit after you've provided more detail
your class doesn't get applied because class that sets style by ID has higher priority in cascade than CSS class. That's the main reason why you're not seeing it applied.
If you'd like your CSS class to take over you have two options:
set it as important:
.box-change
{
border: 1px solid #fff !important;
}
provide CSS rule that has higher specificity and will take over
#box.box-change
{
border: 1px solid #fff;
}
The second way is the preferred way, because using !important will make your CSS harder to maintain, since your classes don't cascade as per CSS but rather as per your importance. And you can easily loose control over that. Avoid important unless on seldom occasions.
How to troubleshoot this?
To help you in the future, you should be using developer tools in browser (Chrome DevTools or Firebug for Firefox) that would immediately show you the problem. And of course understand CSS specificity rules and how they cascade.

As your original styles are defined with #box it is more specific than .box-change, and by default overrides your new additions. It could also be that .box-change is higher up the cascade than #box.
You could solve it one of two ways:
#box.box-change{
border-color: #fff;
}
or
.box-change{
border-color: #fff !important;
}

How do I remove the border around a focused contenteditable pre?

When I set a pre element to contenteditable and put focus in it for editing, it receives a dotted border around it that doesn't look very nice. The border isn't there when focus is somewhere else.
How do I remove that border?
Thanks

Set the outline property to 0px solid transparent;. You might have to set it on the :focus state as well, for example:
[contenteditable]:focus {
outline: 0px solid transparent;
}

You can also add the :read-write pseudo-class to style elements that are editable.
For instance (jsFiddle):
.element:read-write:focus {
outline: none;
}
Read more here on codrops.
The :read-write pseudo-class selector is supported in Chrome, Safari, and Opera 14+, and on iOS.
It is supported with the -moz- prefix in Firefox in the form :-moz-read-write.
The :read-write selector is not supported in Internet Explorer and on Android.

Never remove built-in focus styles without providing a replacement, this feature is essential for millions of people who are using the web without a mouse.
An example of good advice on this topic from the HTML Living Standard (
https://html.spec.whatwg.org/multipage/interaction.html#element-level-focus-apis):
[in order to hide the focus ring] use the :focus-visible pseudo-class to override the 'outline' property, and provide a different way to show what element is focused. Be aware that if an alternative focusing style isn't made available, the page will be significantly less usable for people who primarily navigate pages using a keyboard, or those with reduced vision who use focus outlines to help them navigate the page.
For example, to hide the outline from textarea elements and instead use a yellow background to indicate focus, you could use:
textarea:focus-visible { outline: none; background: yellow; color: black; }