I'm using a lib and i want to remove a property on a class. What is proper way to do it ?
Example :
Lib.css
div {
width: 100%;
}
and custom.css
div {
width: none; //something like that
}
Every rule in CSS has a different default value. Many might have none or auto as default. Check MDN for Reference. Search for 'Initial value'
Example
https://developer.mozilla.org/en-US/docs/Web/CSS/width
Initial value: auto
Edit
You can also use the special value initial, if you don't need to support MSIE browsers.
I encourage you to read about CSS specificity here in the docs:
CSS Specificity: Mozilla Developers and check my answer down below.
There are several ways to overwrite CSS properties from external libraries.
Case 1: if you're using Bootstrap or Zurb Foundation via npm package,
you need to change a variable value that is responsible for given property and place it after importing all library files to ovewrite correctyly eg.
import 'files from library.sass';
// my settings
$default-width: 80%;
Case 2: if you're using CDN to deliver your library you can use a more specific CSS selector to overwrite given property eg:
to overwrite div selector
div {} ----> div.my-class {}
The second technique, but for sure not recommended is to use !important declaration. But remember, using !important declaration often causes many problems during the development process. It is always better to find a more specific selector than use !important.
Related
I have a react application which uses 3rd party libraries to create components.
The problem I am facing is one library css is getting loaded from CDN and other through node_modules. The css coming from CDN is overriding the css from other libraries.
CSS from CDN is written as -
.solar-theme button {
// css properties
}
CSS from other library is as -
.some-button {
// css properties
}
And button component in this library uses solar-theme as classname.
How to isolate the CSS coming from CDN to a single react component so that it doesn't overrides the other library css?
I am new to UI/UX. Please help.
Since you can't edit the CSS files from the libraries, you should write a new stylesheet to override certain properties as you come across them.
You might also have to use important! to enforce your properties.
For example:
/* Your custom stylesheet */
.some-button {
background-color: red !important;
}
If this does not work (it probably won't), you need to be more specific with your declarations.
Generally, the more specific you can be, the higher the chance of your style getting applied (when there are conflicting stylesheets).
So you can upgrade the declaration above by doing something like this instead:
/* Your custom stylesheet */
footer .container .some-button {
background-color: red !important;
}
It's called specificity. You can read more about it here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
I have a weird one that I can't seem to be able to figure out. I am new to CSS and decided to use bootstrap to assist with styles etc.
the problem I have is when I try to assign two classes to a div element, 1 being the bootstrap column and another from my own stylesheet.
the code from my stylesheet seems to be ignored in some cases. now i have taken that one bit of code and css out and put it into the jsfiddle but it works fine. its only when combined with the rest of the html does it seem to have issues. also note that if i use inline styles it works...
I copied the entire code to js fiddle now so that you guys can replicate the issue. the section I am having issues with is the 4 images that are side by side
class="services-boxes"
anyway any assistance will be appreciated, as well as general feedback as I am new to this all! :)
https://jsfiddle.net/d9bv0grx/1/
Due to the way cascading style sheets work it (styles are be applied in order AND by specificity). It is most likely that styles you are expecting to see are being overridden by specificity.
Give this guide a read.
An example is that for <div id="selector">
#selector {background-color:red;}
div {background-color:green;}
You can expect to see a div with a red background, even though the green background is set afterwards, the id selector has greater specificity.
Then try and alter the specificity of your selectors in your css so that they will take precedence over in bootstrap.
Also just going to add, you have casing issues - you declare the class with lowercase in css, capitalised in your html.
You also have syntax issues in your css. Your css should look like:
.services-boxes {
padding:0;
max-height:500px;
width:100%;
}
Sort all this and you should be golden! jsfiddle
Looks like a combination of syntax errors. Your style should be declared like this:
.services-boxes {
padding:0px;
max-height: 500PX;
width:100%;
}
Note that the class is all lowercase (which should match style where declared which is currently Services-Boxes), a colon separating property and value (you has used = in some instances) and one set of curly braces per declaration (the above class .logo-image has 2 closing braces). Just a bit of formatting should see your code recognised
When you don't have total control over your HTML, you can use the !important property in css to give a priority to your styles.
.services-boxes {
color: red !important;
}
However keep in mind that you have to avoid the !important property as much as possible and do not use it unless you can't do it any other way.
I am working on a page - click here for link. The icons are all supposed to have the font size of .side-icon:
.side-icon{
font-size:28px;
}
BUT a style in font-awesome.css is overriding this, no matter where I include the library in the layout.
At the moment I have included the css in the top of a work around sheet (font-awesome-fix.css) using an #import, but I cannot get the 'font: normal normal normal 14px/1 FontAwesome;' to disappear at all.
Please help!
Make your selector more specific :
.side-icon.fa
See here how the priorities of the selectors are calculated.
Hey you should target the before element :
.side-icon:before{
font-size:28px;
}
maybe try adding an id to the specific .side-icon that you need to change the font on.
CSS:
.side-icon #id_goes_here{
font-size:14px;
}
Hope this helps!
The very helpful "!important" usually helps me solve issues like this, or at least determine the root issue:
.side-icon{
font-size:28px !important;
}
Try using more specific css to override the other styles. This may include adding classes or ids so you can chain them together to override.
Examples:
.side-icon.foo{styles}
#bar.side-icon{styles}
If that still doesn't work, you may want to use the !important override to add another layer of specificity. I wouldn't reccomend jumping to use it immediately, but that's mostly because i prefer to code more specifically than using !important everywhere.
Example:
.side-icon{style:value!important;}
If neither of these work, there may be other issues messing with your styles.
This is because of the CSS specificity rule kicks in:
When selectors have an equal specificity value, the latest rule is the
one that counts.
So including your file at the topmost location does not help because the font-awesome.css gets included later and since both .side-icon and .fa are classes on the same element, .fa defined by font-awesome.css got picked up by the browser because .fa was the latest font-size definition.
So, in order to overcome this problem, include your font-awesome-fix.css after font-awesome.css or you could use inline style after the line that includes font-swesome.css
<style>
.side-icon {
font-size: 28px;
}
</style>
or override the .fa font declaration in the same file (if you have control over it) by ensuring that the font-size override comes after the original declaration
or use one of the several ways to become more specific (see CSS specificity[1])
[1] http://www.w3.org/TR/selectors/#specificity
How can I select the likebtn container with CSS?
I have tried several combinations, for example "#meta #likebtn{}" or "#likebtn{}" and it did not work.
Why does this work?
First, you target it as direct as possible:
#likebtn {
/* desired style changes here */
}
Then open your developer tools and check the style inspector; if your CSS rules are being overridden somewhere it will tell you what selector was used to override it.
For instance, this could override your rule:
#meta #likebtn
The next step is to either:
declare your rule with the same selector after the earlier declaration or,
be more precise.