# Cascaded Style Sheet - https://css-tricks.com/ - https://canisue.com - [ACID2 test](https://www.webstandards.org/action/acid2/index.html) ## Concept - Selector and properties - Font and text styles - Styles permeate to children tags (not all do) - Tag /class/id selector, starts with nothing, `.`, or `#`, select classes most of the time. Can be concatenated. - For rules with same *specificity*, the lower one wins (out cascades other rules) - `.brand.title` selects two classes and is more specific. - Classes are more specific than tag. - Don't rely to much on cascading behavior - Never use `!important` - Conditional pseudo-class selectors, e.g. `:hover` state, `:last-child` - Pseudo-element, e.g. `::after` ## Frameworks - Early frameworks provide tools to layout the content. e.g. [Blueprint](https://github.com/blueprintcss/blueprint), [YAML](https://yaml.de), [YUI CSS grids](https://clarle.github.io/yui3/) - Twitter released Bootstrap in 2011 - Processors addressed drawbacks of CSS, such as lacking variables, math ops, nesting, modularity. - Preprocessors: Sass (2006), Less (2009), Stylus (2010), - Postprocessors: PostCSS (2013), CSS in [[js|JS]], such as Emotion in 2017 - Utility CSS class names: [[tailwind|Tailwind]] (2017) ## Layout - Box model, `inline`, `block` and `inline-block` - `padding` is pushing content into the `border`, `margin` pushes other content outside of the border ```css * { box-sizing: border-box; } ``` - Put this line in every project, so that the width of the box includes the border, otherwise only the content. - `flex` needs to be applied in the parent ## Animations - `@keyframes` directive