IN order to keep the CSS rule I want for a div I have to add: "padding-left:70px!important" to apply generally.
but for the mobile, i would like padding-left:0px.
So I simply add to the media query of the mobile size "padding-left:0px!Important"
So I thought that automatically when switching to mobile size it will take the CSS style inside the media query as the one to use as both have!Important.
But does not happen, it still keeps the 75px padding.
Thanks
Order matters, later one with !important will overwrite previous (!important) one, see example below, whatever media query works for your mobile, make sure you order them correctly
(move your global CSS to top, and media query to bottom)
.test {
color: red !important;
}
.test {
color: green !important;
}
<span class="test">TEST TEST TEST</span>
CSS styles will take the most specific rule you supply, so make sure that your padding-left:0px!important rule is still more specific than the one declaring padding-left:70px!important.
If the specificity is identical, then CSS will use the last rule defined, so also ensure that your mobile override appears after the initial padding-left rule.
This is where you can check and understand specificity:
https://www.w3.org/TR/css3-selectors/#specificity
Bonus: calculate selector specificity: https://specificity.keegan.st/
Related
I'm using media queries to make my site resposnive. In my CSS doc, the media queries are below all other styles. I'm am using diplay: none; which works perfectly but on another div the original width is taking priority even when I reduce the browser size.
Image of dev console:
Do I really have to add !important to every media rule?
CSS:
#media screen and (max-width: 930px) {
/* INDEX */
nav ul {
display: none;
}
#sliderContainer {
width: 80%;
height: auto;
}
}
The rule at line #112 in index.css is also applied by #sliderContainer and not by nav li, as you state in your question (it can be seen in the image you posted). Because it is met later and has same specificity, it applies.
If you place !important on a rule, you'll probably need to use !important when trying to override it, and before you know it, half your rules will be !important and fixing responsiveness is going to be a nightmare. Either slightly increase specificity of your rule or change their order.
Very important note: #media queries do not add any specificity to CSS rules. They just make them apply (when conditions are true) or not (when not true).
Useful note: A very good technique to always keep specificity of your selectors as low as possible is to place your custom stylesheets last inside <head>, after any theme/libraries/plugins stylesheets. Whenever you need to override anything, you just copy-paste the selector from where it is currently defined, and only placing it in your custom stylesheet will make it have priority without higher specificity.
Adding !important tags to your media queries may be necessary, should you need to override styles provided by a pre-set template or development platform. For example I work with Squarespace, and have to override their default styles from time to time in this way - however, as with myself, I can understand your aversion towards doing so.
I know I'm not supposed to "ask for clarification" here, but my lack of rep prevents me from simply making a comment: are you working on a web develop platform similar to Squarespace, Weebly, etc., and does applying the !important tag in fact achieve the desired result?
Best,
Tyler
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 have a div like this:
<div class="mobile">Some mobile content</div>
This content is hidden by default (core.css):
.mobile{display: none;}
Now, I want to show this div, when browser resolution is lower than 1024px and it doesn't work:
#media (max-width: 1024px) {
.mobile{display: block;}
}
How can I show this div? Opposite way works fine - showing and then hiding when resolution changes.
Since you use the same selector, it will always use the last called selector.
See this fiddle : http://jsfiddle.net/9KtHg/
It is working perfectly since the media query is called last (so it override the CSS when the condition are met).
But here : http://jsfiddle.net/9KtHg/1/
It is not working since the display:none is last and will override the other CSS.
To avoid that, you need to use greater specificity selector in the media query like :
div.mobile <-the tag name containing class='mobile'
[.][#][tag]parent .mobile <- use the parent in the selector
.mobile{display:block!important}<- using important is a bad pratice, avoid it.
You could also include the core.css before your CSS files containing your mediaqueries.
In conclusion, welcome to the fabulous world of CSS override!
By the way, CSS mean "cascading style sheets". As it said in its name, it work as a cascade where the last declared CSS will be used!
I have a template that has a lot of CSS formatting, but now when I try to add my text I cannot add any formatting to it. Within a paragraph, I try to put superscripts, italics, but nothing works. Is there a way around this?
Here's a little explaination about overiding CSS
I'll take for my example this simple HTML :
<div id='home' class='current'></div>
If you have, for example, a css like
#home{color : blue;}
.current{color : orange;}
The text will be blue since #home is "stronger"
If we put values to selector: id=10 class=5 node selector (div) = 1
so #home = 10 and is higher than .current wich equal 5, #homestyles will override.
you could use li.current but again, 5+1=6 wich is lower than an id.
But #home.current will equal 15! Wich will overide #home styles!
But if your color style is on the node itself within the attribute style="" you have to remove it with jquery or use !important :
.current{
color: blue !important;
}
It will override EVERY css but it is not recommended.
Note that the value i am using are not the exact one, so .parentClass .class will maybe not over an id and i can't find the original values... But keep in mind that the more selective you are, the more chance you have to override a style.
At last, if you have 2 selector with the same value, the last one called will be the one overriding.
Use chrome inspector or firebug to see what's overriding what.
I need a simple <hr/> in a page that extends a default one (I'm using Django template framework); in this default page, a standard and untouchable stylesheet styles HR with border:none; height:1px but I would like to reset these styles to their default values.
I tried putting {border:1px inset; height:auto;} in my page but I didn't get the same aspect as having no style at all.
Is there a method to restore the default style for a tag?
In order to make your rule apply, you'll need to ensure that you give your rule a greater specificity than the existing rule in order to override it.
For example, if the rule is this:
hr {
/* rules */
}
Then you would need to do something like this:
html hr {
/* your rules */
}
Scores are calculated by these basic rules:
elements, like div are worth one point
classes, like .comment are worth 10 points
ids, like #user123 are worth 100 points
The total score for the selector is the sum of all of its parts, so div.class is worth 11 (10 for the .class and 1 for div
(It's actually a bit more complicated than this - see this article for details - but this explanation works as a general rule)
Edit:
I just saw your comment about not knowing the defaults.
According to Firebug, an hr appears to look like this:
hr {
height: 0;
width: 100%;
border: 1px solid #808080;
margin: 8px 0;
}
You can use the tools provided in other browsers to see if they use a different set of styles, then decide for yourself which ones would be the best ones to use.
Try YUI 2 Base CSS, seems to be doing what you want. Or even YUI 3 Base CSS
There is a possibility to "restore" default styles only for a certain context
Update
Just checked - Base CSS does not include styles for hr element
The default stylesheet for HTML documents, without any overrides, is defined by the W3C. You can find the full default stylesheet here: http://www.w3.org/TR/CSS2/sample.html
Alternatively, you could use Firebug in Firefox (or any similar tool) to view the styles of an <hr /> element on a test page without any styles applied.
Sure, you need to give your styles a bigger weight; add an id to your < hr/>, or do this in CSS:
html body hr { ... your styles ... }
No. You either have to not apply the styles in the first place, or override every broken style with explicit values.
You can also give your styles more weight with the !important property. If the original is like this:
.someClass { color: red }
You can override it with this:
.someClass { color: green !important}