A brief introduction to CSS3. Covered: 1) CSS Syntax 2) CSS vs CSS3 3) Cascading 4) Specificity 5) CSS Inheritance 6) CSS Box Model

1. Cascading Style Sheets 3 (CSS3)

2. What’s CSS?
> CSS Stands for Cascading Style Sheets.
> It describes how HTML elements are to be
displayed on screen, paper, or in other media.
> External style sheets are stores in a (.css) file.
> Checkout same page, different style sheets here,
https://www.w3schools.com/css/css_intro.asp
Why CSS?
> CSS defines styles for our website. Everything will
look weird if we don’t style our web pages.
> Imagine living in a building without its wall being
painted!
> Moreover, we all want our customers / visitors to
spend some time on the website instead of just
closing them at once. Well, to stop them and gain
their first impression as the best one, we need to
have some awesome styles for the web page!
Where would you want to go is why you want to use CSS!

3. CSS Syntax CSS Selectors
That’s how we style it!
30 CSS Selector you must memorize: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

4. CSS vs CSS3
> Pseudo Classes (Limited)
[selector]:pseudo-class{
// CSS Code here
}
E.g.: :first-child
> No support for animations. Animations were added using
JavaScript & jQuery (a JavaScript library).
> Before CSS3 developers used to develop images that looked like
rounded corners.
> Not compatible with CSS3
> Much more pseudo classes
E.g.: :nth-child()
:root
:empty
> Supports text shadow
> Supports animations
> Supports border-radius & gradient
> Backward Compatible to CSS
> They load faster and time required to write them is lesser as
compared to that of CSS.

5. Cascading Specificity Inheritance
What do you think h1 will be colored as?
Cascading means that the order
of CSS rules matter. When two
rules apply that have equal
specificity, the latter one will be
used.
Specificity basically is a measure of the
CSS rule priority.
In simple words, it is how the browser
decides which rule applies if multiple rules
have different selectors
Here, class has greater specificity than
the HTML tag itself [Rule]
Some CSS property values set on parent
elements are inherited by their child
elements, and some aren't.
For example, if you set a color and
font-family on an element, every element
inside it will also be styled with that color
and font, unless you've applied different
color and font values directly to them.
Some properties do not inherit — for
example if you set a width of 50% on an
element, all of its descendants do not get
a width of 50% of their parent's width.
Which properties are inherited by default
and which aren't is largely down to
common sense.

6. Controlling CSS Inheritance - ( inherit, initial, unset, revert, all )
Takes computed value from the parent.
Sets a property to its initial value defined
on a per-property basis by the CSS
specifications..
Sets a property to its inherited value if it inherits,
or to its initial value if not.
https://jsbin.com/sayodab/1/edit?html,css,output
New additions:
> revert :
It resets the property to its inherited value if it
inherits from its parent or to the default value
established by the user agent stylesheet (or by user
styles, if any exist).
User Agent Style sheets simply refer to the default styles that
browsers apply to web pages.
> all :
Can be used to apply one of these inheritance
values to (almost) all properties at once.
https://jsbin.com/livugin/1/edit?html,css,output
# Unset vs Revert (Important)
https://jsbin.com/famagez/2/edit?html,css,output
Not same

7. More on Cascade
Source Order
If you have more than one
rule, which has exactly the
same weight, then the one
that comes last in the CSS
will win.
Specificity
1) Inline Style - 1000
2) Id selector - 100
3) Class selector (.class, [attributes], :pseudo-class, :hover, :focus, etc.) - 10
4) Element / Tag & Pseudo Elements (h1, :pseudo-elements, :before, :after, :first-element, etc.) - 1
5) :not, * - 0
6) !important - 10,000
Note:
1) The universal selector (*), combinators (+, >, ~, ' '), and negation pseudo-class (:not) have no effect
on specificity.
2) Inline > Internal > External
101
100
11

8. CSS Box Model - 1
> Normal : Inline Block
> The box will not break into new line.
> Width & height properties will not apply.
> Only horizontal paddings, margins and borders will apply and will
cause other boxes to move away from them.
> Vertical padding won’t apply.
https://jsbin.com/zexolib/2/edit?html,css,output
> E.g. <a>, <span>, <em>, <strong>, etc.
> The box will break into new line.
> Width & height properties are respected.
> Will cover at max 100% by default.
> All padding, margin and borders will cause other boxes to move
away.
> E.g. <div>, <h1>, <p>, etc.
> Not Normal : Flex
> When flex is set, the outer display turns to block but the inner
display is set to flex.
> Inline Flex

9. CSS Box Model - 2
Standart Box Model Alternative Box Model
> In this model, the content area of box =
(total-width of box - border / padding).
> Can be set via:
box-sizing: border-box
> Applying everywhere only once:
> Default
> total width = content-area of box
> padding & border are added
separately.
> Can be set via:
box-sizing: content-box

10. You know where to find me!
webcrat.tech@gmail.com
PS. Keep the subject line as:
[ Web Dev BootCamp ‘ 20 ]
Github @webber2408
LinkedIn @rahul-sharma-25b30b114
Medium @webcrat.tech

11. References
> Amazon.com
> Undraw.co
> Icons made by Freepik from www.flaticon.com
> MDN (HTML): https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
> MDN (CSS - Important): https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks
> W3Schools: https://www.w3schools.com/html/
> HTML Semantics: vikingcodeschool.com/html5-and-css3/html5-semantic-tags
> WikiPedia: https://en.wikipedia.org/wiki/Semantic_HTML