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
Related
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.
What is the best, most maintainable and readable approach to setting a CSS property as the default for given tags in a portion of a page with low specificity. Currently, I have a page which takes the global default font styling from a html selector in a separate global stylesheet. There is a large portion of my page (which has the class dash) which I want to have a different default font style.
The main issue with just setting .dash h1 { font.... } is that this has very high specificity. Every time I want to set a font style for an element which is a descendant of .dash, I need to refer to .dash. Since I am working around a modular design, where each component is developed independently, this is a very bad idea. An even worse solution would be to set !important or to use an ID, for obvious reasons. Obviously, we don't run into this issue when setting fonts for html h1, or any other tag since all tags have lower specificity than classes.
Is there a simple low-specificity approach to setting a CSS property for tags which are descendants of an element high up in the DOM, selected by a class such that it can be overwritten by applying font properties to and element selected by another class?
You can set font properties with a rule like .dash { font ... } and set font properties for elements inside the element so styled, because each element gets it font properties from the declarations that apply to it, rather than its parent or other ascendant.
For example, if you have
<div class=dash>
some content
<h2>some heading</h2>
some content
</div>
and you set
.dash { font-family: Cambria }
then there is no problem in setting
h2 { font-family: Calibri }
without referring to the dash class. The h2 element gets its font family from the latter rule, quite independently of the rule that applies to its parent.
Doesn't
.dash * { font
do what you need?
UPDATE after clarifying comments and fiddles ...
So, I had your question "backwards" because I thought you were trying to ignore specifics in the included html.
BUT I think my suggestion still works, no?
.dash * { color: red; }
.included-class { color: blue /* this will take precedence */ }
http://jsfiddle.net/zDVED/
Based on Harry Roberts article http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/#safely-increasing-specificity, I applied the same class repeatedly in order to increase the specificity of that selector above that applied to the portion (which itself is set simply as .portion-class tag).
See:
Harry Roberts: http://jsfiddle.net/csswizardry/3N53n/3/ - note use of .btn.btn on line 28.
mine: http://jsfiddle.net/Emsap/5/ - note use of .dash-heading.dash-heading on line 2
Note that I was, of course, wrong to think that the location of elements in the DOM was affecting the specificity.
So this is a strange bug I cant seem to figure out.
Im using Meyers reset in my app. But when I edit my main css file to change the h1 font size, it will not change it. But when I put it in the body tag it works. Could anyone explain this to me?
Example
base.css.scss
h1 {
font-size: 2em; //--This doesnt work
}
body {
width: 100%;
height: 100%;
h1 {
font-size: 2em; //-- This works
}
}
Make sure to include the reset file before your base.css.scss file. Looks like it overwrites the h1 rule.
There are three possible causes to this issue. First, make sure you are not trying to use SASS in the browser. It will need to be fully converted to plain CSS before you can use it there. Second, make sure the selector you're using has a higher specificity. That is, make sure the selector is more specific than another selector setting the property. body h1 has a higher specificity than just h1. Though, in Meyer's reset, that shouldn't be a problem. Third is order. If two selectors have the same level of specificity, the one that comes later gets priority. Make sure your reset comes before any other CSS on your page.
you've redefined, so the second assignment of H1 does not work, although you can use! important but I'd better not
Because the second one has a more specificity than the first one: in this case body h1 has more power than h1
The issue you are having is two-fold. There is a specificity issue as well as a cascading issue. You aren't going to be able to override a style before it is declared without using and !important. So your override should be after the reset.
You will also want to match the selector you are trying to override. So if your reset is targeting the element with the body and h1 selectors, do the same to override the styles.
body h1 { font-size: 2em; }
I have a css-problem I really don't seem to understand :) I have been styling css for three years now, but I've never had this problem.
I have declared some styles in my css-file that should apply for the content of my page. This is generally the right css, but there are some exceptions, like the page_child_title. I was under the impression that if I declared a style further in my css for specific classes, these would override earlier css-declarations. well now, in this case, it is not true. When I inspect with firebug, it seems that my browser really wants to use the font-size-css of ".page a" instead of using the ".page_child_title" (and I for one do not agree with my browser). The color of ".page_child_title" is applied correctly however. Below you can find the Html and css I'm talking about.
Html
<div id="page" class="page Jobs">
<div class="page_child">
<a class="page_child_title" ...
Style.css
.page p, .page ul, .page a {
font-size: 10px;
text-align: justify;
}
style.css (line 208)
.page_child_title {
color: #006633;
font-size: 12px;
}
style.css (line 262)
I have already tried replacing ".page_child_title" with ".Jobs a" but this didn't work. Then I tried declaring ".page_child_title" before ".page a", same result, so now I'm kind of stuck. Does anyone know what could be causing this problem?
.page a is a more specific selector. Therefore its settings will be used.
This phenomenon is called css specificity:
http://css-tricks.com/855-specifics-on-css-specificity/
a.page_child_title { ... } would work.
It would seem to me that selecting an element by its type rather than classname would be more specific.
Try changing .page_child_title to a.page_child_title
Example.
There are two solutions,
http://jsfiddle.net/ErsS4/
Change page_child_title to
a.page_child_title
Or
http://jsfiddle.net/m5V8f/
This meathod is a direct statment to the element.
Hope this helps!
An easy fix should be to change your style to
a.page_child_title
I believe it has something to do with the hierarchy of css and declaring the style of a itself.