Override a css heading with a new style class

Question

I am using one of the free web design templates to create my own site. The template uses a css style sheet and defines lots of different styles with similar names. I defined some new styles, but the problem is new styles do not effect to my pages. For example, this is the style for heading2 in one of the blocks:

 #body .article h2 {
color: #ffaf04;
font-family: Georgia, serif;
font-size: 36px;
font-weight: normal;
letter-spacing: 2px;
line-height: 48px;
margin: 0;
padding: 0 48px;
text-align: center;
    }

I try to add and use this style

 .eventTitle { font-size:28px; color:black  }

but when I use

 <h2 class="eventTitle">something</h2>

style from #body .article is applied not eventTitle.

I was wondering maybe there is some parenting or protecting of some parent styles in CSS, or maybe some div items has to use some specific class styles or something.

I appreciate all comment and ideas in advance.

Answer 1

Your second selector is less specific than the first selector, so even if the second one comes after the first one in your CSS file, the first one will be applied.

Read more about specificity here (a blog post written by Chris Coyier) and here (the W3C specs).

Here is a very funny comic that pretty much sums up the concept of specificity.

My suggestion: Try taking out #body in the first selector (unless there's a very good reason it is there in the first place). Then try changing your second selector to

.article .eventTitle { font-size:28px; color:black  }

I would not recommend adding the !important modifier to your css commands. It should be used sparingly (as @Cody Guldner states). Really, your CSS should be clean and concise. Using !important a lot is only setting yourself up for more work in the future. Personally, I only use it for bug fixes and experiments.

Answer 2

eventTitle will not be applied since #body .article h2 is much specific than the class, you can try to change your class styles to

.eventTitle { font-size:28px !important; color:black !important; }

so that it will have priority over the more specific #body .article h2

Answer 3

change .eventTitle to #eventTitle. IDs always override a class. Unless an element has 256 classes with the same styles ;) http://codepen.io/chriscoyier/pen/lzjqh

You could possibly use !important, but I would not recommend it.

You could also do something like this

#body h2, .eventTitle {
font-family: Georgia, serif;
font-weight: normal;
letter-spacing: 2px;
line-height: 48px;
margin: 0;
padding: 0 48px;
text-align: center;
}
.article h2{
color: #ffaf04;
font-size:36px;
}
.eventTitle { font-size:28px; color:black  }

Hope this helps