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.
Related
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
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 am working on a website management utility for a friend of mine. In the index page, I have a link to a CSS stylesheet that came with a template I've bought. I use CKEditor to edit files, but the CSS stylsheet applies many bad styles to the editor.
I am not quite familiar with CSS (that's why I bought the template...) and I want to unlink the stylesheet only from the div/tag. I don't want to unlink it from the whole page, because it uses the stylesheet.
<div style="UNLINKED"> [CKEDITOR CODE GOES HERE] </div>
I don't know if it is possible, but I need to do something with it.
Thanks!
You must override the styles, there is no way to "unlink" a specific element from the page styles.
Therefore, for example, if your stylesheet defines bold text for all paragraphs like this:
p { font-weight: bold; }
you have to override that to bring the paragraph back to normal text:
div.unlinked p { font-weight: normal; }
Assign a class to the div and create style for it- the styles defined in the class will override global styles.
div.nostyle {
margin: 0;
padding: 0;
text-decoration: none;
border: 0 none;
}
<div class="nostyle">CKEDITOR CODE</div>
It cannot unlink the stylesheet once if was linked on the beginning.
Only some circumstances can help:
put the all the <div ... </div> period into an iframe.
or override all the style elements of the div
In this case, I would advise embedding the code into an iframe element. Otherwise, there is no way to avoid the cascade without overwriting every rule affecting the content with more specific rules.
ok, so the solution may be different for every dev. if it's ckeditor, try deleting the table selectors. for me the problem was with the <td> selector. thanks for the answers...
Easy! All you have to do is delete the code at the top of the HTML! Once you do, the page automatically unlinks from the stylesheet. No need to override what was provided. :)
I'm trying to catch all the elements of my website in one css declaration. It's a Drupal websites with a billion p's, a's, li's, ul's, strong's, all kinds of div's,...
So, pretty easy I thought and I added this in my css:
body.i18n-zh-hans {
color: red;
}
But for some freakishly reason, the site doesn't move a muscle.
What's the proper declaration to catch ALL the text in just 1 CSS declaration?
Worst case scenario, I would have to declare everything on its own no? Like:
body.i18n-zh-hans, #main p strong a li ul {
color: red;
}
UPDATE
So, Basically, I just want to override all, in this example, the colors of the font in the whole website!
Thanks in advance
You'd want to make that declaration !important, so it'd override any more "specific" styles specified elsewhere in your CSS. Remember that CSS has precedence rules, and "more specific" matches will have higher priority than "less specific" ones.
body.i18n-zh-hans {
color: red !important;
}
* {
your style..
}
and you got to be the last rule in the list..
and there might be some inline styles, those will override..
tested it a bit out and figured out that everything you define in it needs !important..
Here you go:
If body is the biggest box in the box model. Get it? You want to target the big container. Try firebug. It's a great tool. You can even edit the css on the browser to instantly change the website (not permanent though).
body {
color: red !important;
}
This was the one and only solution!
.i18n-zh-hans * {
font-size: 99% !important;
}
Thanks to everyone who participated this discussion.