13- Learn CSS Fundamentals / Specificity
•
0 likes•174 views
Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How specificity works for different kind of selectors. - How to create selectors avoiding specificity issues and conflicts. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/specificity.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 13- Learn CSS Fundamentals / Specificity
Similar to 13- Learn CSS Fundamentals / Specificity (20)
More from In a Rocket
More from In a Rocket (10)
Recently uploaded
Recently uploaded (17)
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