Here's a recording of the lecture that I ran for Flatiron School students on 10/04/2019: video.
Try this (it removes all css in a website):
document.querySelectorAll('style,link[rel="stylesheet"]').forEach(style => style.remove());
Press option + command + j
then paste this code in and press enter
Or play here: http://cssisfun.surge.sh/
Also: Bootstrap, Semantic UI, Materialize, Deque -> what is it? why would I (not) use it?
4 elements of the box model:
- margin - the area outside the border (it is transparent);
- border - it goes around the padding and content;
- padding - the area around the content (it is transparent);
- content - the content of the box, where text and images appear;
- Cascade: CSS is a cascade (a type of algorithm). At a very low level, it means that that the order of CSS rules matter; meaning, if you define a background color of a div in two places, the color that comes last will be applied;
- Specificity: however, more important than the cascading character of css is the rule of specificity; CSS will take more seriously the requsts that are more specific; here's the hierarchy of specificity (from the most to the least): element selector -> class selector -> id selector note: inline CSS is more specific than external file, which is why it's easy to overwrite external libraries;
PS: Specificity is set up with point system -- each declaration is evaluated in points, then compared and the winners take it all! For instance, if you declare styling inline, this declaration gets 1000 points from the get-go (for real), as opposed to 0 when declared in an outside stylesheet;
- Inheretance: now, some elements inherit styling from their parents while others don't; for instance, color and font will be inherited by children but width and height will not! You can play with inheritance by using an
inherit
attribute! - !important: now, you can override all rules using the value of
!important
; however, beware: you will enter the long-term css debugging hell if you invite this value without an absolute desperate necessity;
- Button generator: https://www.bestcssbuttongenerator.com/#/3
- 10 animations generators (including fancy spinners you will love while doing React): https://www.hongkiat.com/blog/css3-animation-tools/
- More animations: https://sarthology.github.io/Animatopy/
- CSS generator: http://angrytools.com/css-generator/
- Another CSS generator: https://webcode.tools/css-generator/
- Gradient generator: http://angrytools.com/gradient/
- Grid templates: https://gridbyexample.com/examples/
- Classless CSS themes: https://www.cssbed.com/kacit/
- CSS: https://flukeout.github.io/
- Flexbox: https://flexboxfroggy.com/
- Grid: http://cssgridgarden.com/
- All attributes: https://tympanus.net/codrops/css_reference/
- All selectors and how to chain them: https://www.w3schools.com/cssref/css_selectors.asp
- All about grid: https://css-tricks.com/snippets/css/complete-guide-grid/
- All about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- 20 tricks to make your life easier: https://www.webdesignerdepot.com/2016/10/20-essential-css-tricks-every-designer-should-know/
- Grid vs Flexbox: https://medium.com/youstart-labs/beginners-guide-to-choose-between-css-grid-and-flexbox-783005dd2412
- Font sizes: em, % sizes, named sizes
- Color contrast explanation: https://a11yproject.com/posts/what-is-color-contrast/
- Color contrast checker: https://colorable.jxnblk.com/d7cdca/252f32
- Color contrast generator: https://learnui.design/tools/accessible-color-generator.html
- :focus property https://a11yproject.com/posts/never-remove-css-outlines/
- Deque Pattern Library (instead of bootstrap or materialize): https://pattern-library.dequelabs.com/
- ADVANCED :maximum-scale property https://a11yproject.com/posts/never-use-maximum-scale/
- This painting was made entirely with CSS: http://diana-adrianne.com/purecss-francine/
- All made with CSS: https://a.singlediv.com/
- Zen Garden: http://cssgridgarden.com/
- Mind-blowing CSS projects: https://www.webdesignerdepot.com/2017/09/11-experimental-css-projects-thatll-blow-your-mind/