13- Learn CSS Fundamentals / Specificity
0 likes190 views
The document discusses CSS fundamentals and emphasizes the importance of understanding cascade and specificity in front-end development. It includes examples of HTML and CSS code to illustrate key concepts, such as selectors and styles. The content is designed to provide clear, practical guidance for learners looking to build a strong foundation in CSS through real-world examples.
13- Learn CSS Fundamentals / Specificity
- 1. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Specificity
- 2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CASCADE SPECIFICITY +
- 3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Web page title index.html HTML CSS h1 { color: blue; } p { color: red; } input { color: pink; } h1 { color: green; } CASCADE I'm a header
- 4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com Web page title index.html HTML CSS <html> <head> <link rel="stylesheet" href="styles.css"> <style> h1 { color: blue; } </style> </head> <body> <h1 style="color: green">I'm a header</h1> </body> </html> CASCADE I'm a header h1 { color: red; }
- 5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CASCADE SPECIFICITY +
- 6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser SPECIFICITY <body> <header> <h1>I'm a header</h1> </header> </body> header h1 { color: green; } h1 { color: blue; } Web page title index.html I'm a header The h1 selector position is better for cascade, but header h1 prevails because is more specific. READY TO USE CODE
- 7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline (style attribute) selector 0 000
- 8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com •Soy el primer enlace de una lista. •Soy el segundo enlace de una lista. •Soy el tercer enlace de una lista. My links list index.html ul li a
- 9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline (style attribute) ul li a 0 000
- 10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline (style attribute) ul li a 0 300
- 11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com •Soy el primer enlace de una lista. •Soy el segundo enlace de una lista. •Soy el tercer enlace de una lista. My links list index.html ul li a .lk-list
- 12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline (style attribute) .lk-list 0 000
- 13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline (style attribute) .lk-list 1 000
- 14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com •Soy el primer enlace de una lista. •Soy el segundo enlace de una lista. •Soy el tercer enlace de una lista. My links list index.html ul li a .lk-list #lk-list
- 15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline (style attribute) #lk-list 0 000
- 16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline (style attribute) #lk-list 0 010
- 17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CAUTION •Soy el primer enlace de una lista. •Soy el segundo enlace de una lista. •Soy el tercer enlace de una lista. My links list index.html ul li a .lk-list #lk-list { } <a style=""...
- 18. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline (style attribute) <a style=""... 0 000
- 19. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline (style attribute) <a style=""... 0 001
- 20. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com LET'S PLAY!
- 21. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline html body div div h2 0 000 ElementClass Pseudo-class Attribute IDInline .header-important 0 000
- 22. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline html body div div h2 0 500 ElementClass Pseudo-class Attribute IDInline .header-important 1 000
- 23. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline #info 0 000 ElementClass Pseudo-class Attribute IDInline .box .info p 0 000
- 24. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline #info 0 010 ElementClass Pseudo-class Attribute IDInline .box .info p 2 100
- 25. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline ul#nav li.active a 0 000 ElementClass Pseudo-class Attribute IDInline #lk-special 0 000
- 26. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline ul#nav li.active a 1 310 ElementClass Pseudo-class Attribute IDInline #lk-special 0 010
- 27. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline #box ul li a 0 000 ElementClass Pseudo-class Attribute IDInline li a .lk-important 0 000
- 28. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ElementClass Pseudo-class Attribute IDInline #box ul li a 0 310 ElementClass Pseudo-class Attribute IDInline li a .lk-important 1 200
- 29. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com SPECIFICITY WARS
- 30. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: SPECIFICITY CALCULATOR
- 31. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: VISUAL STUDIO CODE Just hover your pointer over a selector
- 32. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com CASCADE SPECIFICITY +
- 33. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com YOU CAN CONTINUE THIS COURSE FOR FREE ON + READY TO USE CODE + QUIZZES + FREE UPDATES
- 34. We respect your time No more blah blah videos. Just straight to the point slides with relevant information. Ready to use code Real code you can just copy and paste into your real projects. Step by step guides Clear and concise steps to build real use solutions. No missed points. Learn front-end development at rocket speed inarocket.com
- 35. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Specificity