CSS :yes !important;

Cascading Style Sheets

The key to understanding CSS is the term cascading.

<div class="waterfall first-level">
    <div class="second-level">This is rad!</div>
    <ul>
        <li>
            <span>Home</span>
        </li>
        <li>
            <span>About</span>
        </li>
        <li>
            <span>FAQ</span>
        </li>
    </ul>
</div>

It's like a waterfall in that it cascades from the top down.

Cascading Style Sheets

<html>
    <body>
        <div class="waterfall first-level">
            <div id="main-title">
                <span>This is rad!</span>
            </div>
            <ul>
                <li>
                    <span>Home</span>
                </li>
                <li>
                    <span>About</span>
                </li>
                <li>
                    <span>FAQ</span>
                </li>
            </ul>
        </div>
    </body>
</html>

body{
    font-size: 12px;
}

div{
   border: solid 1px #fff; 
}

#main-title{
    border: solid 2px #bebebe;
}

span{
    font-size: 14px;
}

.waterfall ul > li span{
    font-size: 10px;
}

Can you spot the cascade?

Cascading Style Sheets

Specificity...yes it's a word.

It basically means which rule takes precedence when more than 1 rule matches a given element.

The following rules apply from most specific (higher precedence) to least specific (lowest precedence)

Style on HTML element Ex. <div style="...">
ID Ex. #someid
Class Ex. .some-class
Tag Ex. div

The MOST specific matching rule will be applied.

Cascading Style Sheets

Specificity holds true always....except when it's:

!important

div{
    color: pink !important;
}

div#blue{
    color: blue; <-- doesn't matter, not important
}

Cascading Style Sheets

:pseudo selectors

a{
    color: black;
}

a:hover{
    color: pink;
}

ul:first-child{
    color: blue; 
}

Pseudo selectors are styles that are applied to elements with a certain state or relation

They allow us to bring life to our dynamic applications as we interact with them and UI changes.

Past, Present, Future

CSS2 has support across most browsers that you should care about.

CSS3 is largely supported by most modern browsers but certain styles may differ with support.

CSS4 is very recently starting to creep into the latest releases of modern browsers and include mostly new pseudo selectors.

NOTE: Standard support among all browsers and versions has been a problem for years.

Browser Support

Browser Support: Always check and use appropriately.

Vendor prefixes came about as certain browsers started implementing support before others so that developers could target their browsers while offering fallbacks for other browsers.

-webkit-transition: all 4s ease; //Android and chrome
-moz-transition: all 4s ease; //Firefox
-ms-transition: all 4s ease; //Internet Explorer
-o-transition: all 4s ease; //Opera
transition: all 4s ease; //Standard

http://www.w3schools.com/cssref/css3_browsersupport.asp