Forum:I'm struggling with CSS.

I know all the correct syntax and parameters and such, but my wiki just isn't accepting it. I've looked and looked and I don't think it's just any old typo, so I figured there must be some wikia thing I don't know about.

On my common.css page I have this: .menuheader { color:#FFFF00; font-size:150%; font-variant:small-caps; !important; } and on my page I have this: Elements But the heading still appears as the default. If anyone can help me, I'd really appreciate it.

This is the wiki just for the record, note the headings.

Dr Yoshiyahu 04:28, August 24, 2012 (UTC)


 * Oasis doesn't import mediawiki:common.css by default. You should import common.css from wikia.css. -- Kangaroopowah  ( Talk ) 04:39, August 24, 2012 (UTC)


 * Kangaroo is correct, unfortunately, MediaWiki:Common.css doesn't affect the Oasis skin unless you tell it to. You haven't told it to, so the CSS isn't going into effect. The solution would be to either put the CSS in your MediaWiki:Wikia.css, or place the following @import statement at the top of your MediaWiki:Wikia.css:


 * Although this is not a problem in this case, please also be aware that the MediaWiki performs a conversion of wikitext -> HTML when you publish the page. So while you did indeed put:

 Elements
 * on the page, the MediaWiki software actually modifies the HTML structure of the webpage and inserts an extra  element. What the HTML actually looks like (use developer tools -- right-click and Inspect element to view the HTML of the webpage) is this:

 Elements
 * So, you also should keep in mind that this can potentially cause problems for you in the future (although, in this case, the extra  isn't going to hurt anything)




 * Thanks guys, much better. :)
 * Edit: actually maybe that is effecting what I'm doing. I just added in a little div element to the headers.
 * Elements
 * And it all looks fine except for the padding. It's always the same, something just gets messed up. The most common problem is that it creates a huge top-padding. The margins are fine though.


 * PS. One other thing that's bugging me. Editing the font-size doesn't do anything. My font-size is currently set to 590px and it still looks the same as when I had it set to the default. I'd love it if someone could help me with that too. :/


 * Dr Yoshiyahu 12:56, August 24, 2012 (UTC)

The HTML you now have is: Classes In MediaWiki:Common.css, you have: So, the CSS matches the h2 element and should be changing the font size. However, the reason it's not working is because there is other CSS rules that are overriding your CSS. Wikia has default CSS that affects all wikis, in particular, if you right-click on the header and choose Inspect element, you can take a look at all CSS that is affecting it.



Here's the problem: So on one hand, you have your  selector trying to change the font-size. But  is also trying to change the font-size. What happens is that  "wins" because it has higher specificity. This article gives a good explanation of what specificity in CSS is -- it's a mechanism that controls what happens when multiple declarations try to change the same property of the same element.

The solution to your problem is that you need to use a selector that has higher specificity.

Replace: with: Note: I have removed the  part of the code. !important rules should generally be avoided. If you want a certain CSS rule to always "win", you can make it  -- but this is bad coding practice, you want to use the specificity mechanism. This is why CSS is called Cascading Style Sheets, because specificity controls how the rules cascade.


 * Thankyou so much. :) You're a genius!


 * Dr Yoshiyahu 08:49, August 26, 2012 (UTC)