I want to load a css code from a specific stylesheet first,
Like:
ul, ol {
margin: 0 0 10px 25px;
padding: 0;
}
the above code is in two files: core.css and bootstrap.css
core.css load first in head tag.
But browser always use code first from bootstrap.css.
I tried to rename bootstrap.css to z-bootstrap.css.
But no luck still browser apply styles from z-bootstrap.css
It work when I edit ul, ol to body ul, body ol in core.css
But I dont want to do this, How to apply styles from core.css without adding any class or attribute.???
In your declaration, have core.css below/after bootstrap.css
example:
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="core.css">
The order of css application does not always depend on the include order, but on the level of specificity:
http://www.w3.org/TR/CSS21/cascade.html#specificity
You need to load core.css after bootstrap.css in order for the rules in core to override bootstrap.
Try to put !important at the end
ul, ol {
margin: 0 0 10px 25px !important;
padding: 0 !important;
}
That will give priority
Related
On my layout page, in the <head>, I have the following styles:
<link rel="stylesheet" href="/dist/vendor.css">
<style>
.bg-dark {
background-color: #240000;
}
</style>
I have added the link to my layout page. The style block is added dynamically by Angular & webpack. From what I know about CSS, that last .bg-dark class should win over any .bg-dark class declared in `vendor.css. Yet I see the following:
Is this something caused by the magical pre-rendering of Angular? Is there some way to prevent this?
The background-color attribute in vendor.css has the !important flag, which elevates its priority:
background-color: #222222 !important;
To override that setting, you should set the !important flag in your layout page CSS:
<style>
.bg-dark {
background-color: #240000 !important;
}
</style>
or remove that flag in vendor.css, if your can.
I have a stylesheet which has the following property,
.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
color:#FFFFFF!important;
}
I can't edit the stylesheet. How do I change the property to
color:#000000!important;
I tried to write the following code in another stylesheet,
.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
color:#000000!important;
}
but it did not work. Please guide. Thanks.
Other than Emmanuel's answer which talks about this: CSS Specificity, You can also try using two approaches:
Change order of stylesheet
Make sure your other stylesheet order is higher than the current version. That is include the new stylesheet link after the stylesheet which is to be overridden
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style1.css"> <!-- Styles that will overwrite -->
Inline HTML
If you can change your HTML, you can use this:
<span style="color: #000000 !important;">
!important in inline style will have higher priority than in other types of styles.
Did you try using:
.primary-nav .suppa_rwd_button span{
color:#000000!important;
}
Other way could be using JavaScript:
Override using JavaScript
$('.mytable td').attr('style', 'display: none !important');
Cheers!
In order to override an !important rule you have to put a same specific rule after the previous one or to increase specificity of new rule as:
nav.primary-nav li.suppa_rwd_button, nav.primary-nav li.suppa_rwd_button span{
color:#000000!important;
}
* suppose that .primary-nav is a nav element and .suppa_rwd_button a li element, you could change them due to your markup.
In both cases you have to also use !important in your new rule.
Reference: MDN - Specificity
I have a problem when I am trying to include jQuery Notebook plugin into my twitter bootstrap page. The problem is that CSS of the plugin became messed up. For example on this fiddle if you will select text, you see that controls are not on the right places.
But if you will remove bootstrap CSS - everything is ok.
Looking at jQuery notebook css, I can see that all of the classes use
.jquery-notebook ....{
}
So it is highly unlikely that they overwrite any of twitter's styles. How can I fix the styles here?
If out of a sudden in 5 years the jsfiddle will disappear, you can still find the code here:
<link rel="stylesheet" href="css/jquery.notebook.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="my-editor">
Here is my text
</div>
<script>
$(document).ready(function(){
$('.my-editor').notebook();
});
</script>
<script src="js/libs/jquery-1.11.0.min.js"></script>
<script src="js/libs/jquery.notebook.js"></script>
The reason is Bootstrap override ul margin property. so you can use bootstrap with jquery notebook plugin you just change small modification to solve this problem,
jquery.notebook.css
Old style (line number 74)
.jquery-notebook.bubble ul {
padding: 0;
margin: 0;
list-style: none;
}
new style
.jquery-notebook.bubble ul {
padding: 0;
margin: -20px 0; // Add top margin -20px
list-style: none;
}
The bootstrap adds a margin top and bottom to the elements with class names h1 and h2. Try making the margins zero for these two elements in your css.
.h1,.h2{
margin:0;
}
I am working in Joomla and the CSS that comes with a third-party has the following CSS code that is causing a conflict and I was told to have it removed:
[class*="span"] {
float: left;
margin-left: 20px;
min-height: 1px;
}
I don't want to remove this from the "core" of the third-party component because when an update comes in, it will overwrite this. I normally put in CSS I want to override in the template's custom.css file with !important and that has worked.
Is there a way, perhaps using !important to do the equivalent of removing the above block of CSS code so it doesn't function? I'm not a CSS expert, but is there a way of putting this in the custom.css that would make this CSS block non-functioning so it doesn't interfere? Thanks!
Yes
[class*="span"] {
float: none !important;
margin-left: none !important;
min-height: none !important;
}
But, unless there's a JS plugin loading that CSS on page load, there's no need. Include your CSS after the third-party's version, which you should always do anyway.
[class*="span"] {
float: none;
margin-left: none;
min-height: none;
}
Example HTML
<link href="/css/joomla.css" rel="stylesheet" />
<link href="/css/third-party.css" rel="stylesheet" />
<link href="/css/custom.css" rel="stylesheet" />
custom.css rules will override third-party.css rules.
One way I would do it to give CSS class to my body. Say "myCustomClass" then.. override the above class as follows:
.mycustomclass [class*="span] {
add properties
}
Example: http://jsfiddle.net/ankitvijay/n4Enb/
I'm trying to remove the 8px margin from the body tag.
I've tried (not all at once)
* { padding:0; margin:0; }
and
html, body { padding:0; margin:0 !important; }
and
body { margin:-8px; }
and even
<body style="margin:0">
The last one works, but only if I add the style attrib using Firebug; if it's in the original HTML, it gets ignored.
I'm at my wit's end.
Edit: facepalm I figured it out; I'd changed it to a cfm so I could easily call browser-specific styles. Thank you all for your help.
Include a reset stylesheet instead, this way you will reset all of the default values equally in all browsers.
http://meyerweb.com/eric/tools/css/reset/
All you need is:
body { margin: 0; padding: 0; }
The padding is not needed for Firefox, but for Opera, which uses padding instead of margin for the default.
Demo: http://jsfiddle.net/k3j8Y/
body{ margin: 0;}
works ok for me :P
Include your stylesheet correctly
As your style is not appearing in FireBug's CSS rule stack, your CSS is probably not linked correctly. Ensure the stylesheet is in your head tag like so:
<head>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>