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 Architecture
CSS is relatively easy to understand but can grow unwieldy and unmanageable over time.
CSS can be learned in a day, but mastered over years.
The CSS Bible:
For years, we had hacks, semi best practices and new frameworks but no true consistency.
References
Inspiration
CSS :yes !important;
CSS Yes!
By Jason Sewell
CSS Yes!
- 3,006
