4/9/14: Day 3 | CSS Specificity
Something that I never quite figured out on my own was CSS specificity. What trumps what? Are there exceptions? Isn't it just a cascading style sheet, so doesn't it just show whatever appears last?
Well, yes and no. It depends on the specificity! The general rule of thumb is ID > Class > Element/tag... but there are two exceptions (see below!):
1. Id (#): Most specific! Id's will trump classes and element/tags.
html: <div id="main"></div>
css: #main {background: #1C3148;}
2. Class (.): Second most specific! Classes will trump element/tags but will not trump Id's.
html: <p class="caption">This is a caption for a photo!</p>
css: .caption {color: white;}
3. Element/Tag: Element tags are the least specific.
html: <li>This is a bullet point</li>
css: li {color: yellow;}
Exceptions:
inline styles overwrite most cases.
!important overwrites pretty much everything, but many people advise against using this in your CSS.