css-lecture

Here's a recording of the lecture that I ran for Flatiron School students on 10/04/2019: video.

For starters: world without CSS

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

WARM UP: QUIZ

Open ./quiz/index.html in your browser.

Or play here: http://cssisfun.surge.sh/

Also: Bootstrap, Semantic UI, Materialize, Deque -> what is it? why would I (not) use it?

The Box Model

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;

The Cascade vs Specificity vs Inheritance vs !important

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;