CSS Fundamentals

Beatriz Silveira

Transcript

1. CSS Fundamentals
2. Timeline • css1- released in 1996 • css2 - released in 1998 • css3 - in Development (Split up into independent modules) • https://www.w3.org/TR/
3. Selectors • Element • Class • ID • Universal • Attribute
4. Selection by Element
5. Selection by Class
6. Selection by ID
7. Selection by Attributes
8. Selection Universal
10. Cascading Style & Specificity Inline Styles #ID .class :pseudo-class [attribute] <Tag> ::pseudo-element
11. Combinators • Adjacent Sibling • General Sibling • Child • Descendant • Group of Selectors
12. Adjacent Sibling Combinator
13. General Sibling Combinator
14. Child Combinator
15. Descendant Combinator
16. Group of Selectors
17. But why Do I need selectors and Combinators ? Spoiler: To Apply properties
18. Properties
19. But how this property interfere in my CSS ?
20. Every element in HTML is interpreted as a box by CSS CSS Box Model
21. Margin Collapsing
22. Display Property display: block;
23. Display Property display: inline display: inline-block
24. Positioning Elements with CSS • Position: • static • Fixed • Relative • Absolute
25. Positioning Elements with CSS Position: Static Default value
26. Positioning Elements with CSS
27. Positioning Elements with CSS <div> Top Bottom Left Right
28. Fixed Position
29. Z-index
30. Absolute & Relative
31. Absolute & Relative
32. Pixel, Percentages & More
33. How is the size calculated? Absolute Viewport Relative Font Relative px rem vh em vw %
34. Rules to remember
35. REM x EM https://codepen.io/beatriz1304/pen/ELReaJ
36. vh & vw https://codepen.io/beatriz1304/pen/VxdGKa
37. Box-sizing box-sizing: content-box; box-sizing: border-box;
38. Box-sizing
39. Box-sizing
40. Some cases not covered • Font Family • pseudo class and pseudo elements • @media query • Flexbox • Grid Layout • Images • Transition • Animation