Introduction to CSS3
0 likes137 views
CSS (Cascading Style Sheets) defines how HTML elements are displayed, enhancing user experience by styling web pages. CSS3 introduces new features such as animations, border-radius, and improved pseudo-classes, while maintaining backward compatibility with CSS. Understanding CSS specificity and inheritance is crucial for applying styles correctly, as the order of rules and their specificity determine which styles are applied.
![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.](https://image.slidesharecdn.com/introductiontocss3-200718124555/85/Introduction-to-CSS3-4-320.jpg)
![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.](https://image.slidesharecdn.com/introductiontocss3-200718124555/85/Introduction-to-CSS3-5-320.jpg)
![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](https://image.slidesharecdn.com/introductiontocss3-200718124555/85/Introduction-to-CSS3-7-320.jpg)
![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](https://image.slidesharecdn.com/introductiontocss3-200718124555/85/Introduction-to-CSS3-10-320.jpg)
Introduction to CSS3
- 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! [email protected] 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